import React from 'react';
import styled from 'styled-components';

import type { JSX } from 'react';

import { FeedbackType } from '@redocly/theme/core/types';
import { Button } from '@redocly/theme/components/Button/Button';
import { ThumbUpIcon } from '@redocly/theme/icons/ThumbUpIcon/ThumbUpIcon';
import { ThumbUpFilledIcon } from '@redocly/theme/icons/ThumbUpFilledIcon/ThumbUpFilledIcon';
import { ThumbDownIcon } from '@redocly/theme/icons/ThumbDownIcon/ThumbDownIcon';
import { ThumbDownFilledIcon } from '@redocly/theme/icons/ThumbDownFilledIcon/ThumbDownFilledIcon';
import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';

export type SearchAiActionButtonsProps = {
  content: string;
  className?: string;
  feedback?: FeedbackType;
  onFeedback: (feedback: FeedbackType) => void;
  disabled?: boolean;
};

export function SearchAiActionButtons({
  content,
  className,
  feedback,
  onFeedback,
  disabled,
}: SearchAiActionButtonsProps): JSX.Element {
  return (
    <ActionButtonsWrapper className={className} data-component-name="Search/SearchAiActionButtons">
      <CopyButton data={content} />
      <FeedbackButton
        variant="text"
        size="small"
        icon={feedback === FeedbackType.Like ? <ThumbUpFilledIcon /> : <ThumbUpIcon />}
        onClick={() => !disabled && onFeedback(FeedbackType.Like)}
        extraClass={feedback === FeedbackType.Like ? 'active' : ''}
        aria-label="Like this response"
        disabled={disabled}
      />

      <FeedbackButton
        variant="text"
        size="small"
        icon={feedback === FeedbackType.Dislike ? <ThumbDownFilledIcon /> : <ThumbDownIcon />}
        onClick={() => !disabled && onFeedback(FeedbackType.Dislike)}
        extraClass={feedback === FeedbackType.Dislike ? 'active' : ''}
        aria-label="Dislike this response"
        disabled={disabled}
      />
    </ActionButtonsWrapper>
  );
}

const ActionButtonsWrapper = styled.div`
  display: flex;
  align-items: center;
  gap: var(--search-ai-feedback-gap);
`;

const FeedbackButton = styled(Button)`
  &:disabled {
    pointer-events: none;
    cursor: default;
    opacity: 1;
    background-color: var(--button-bg-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
  }

  &:disabled.active {
    background-color: var(--button-bg-color-active);
    border-color: var(--button-border-color-active);
    color: var(--button-color-active);
  }
`;