import { Anchor, Button } from "@zendeskgarden/react-buttons";
import { useState } from "react";
import { Paragraph, Span } from "@zendeskgarden/react-typography";
import { useTranslation } from "react-i18next";
import SparkleIcon from "@zendeskgarden/svg-icons/src/12/sparkle-fill.svg";
import type { CitationArticle } from "../data-types";
import styled from "styled-components";
import { getColorV8 } from "@zendeskgarden/react-theming";

interface GenerativeAnswerSourcesListProps {
  citations: CitationArticle[];
  testId: string;
}

const SourcesContainer = styled.div`
  border-top: 1px solid ${(props) => getColorV8("neutralHue", 300, props.theme)};
  padding: ${(props) => props.theme.space.sm}
    calc(2 * ${(props) => props.theme.space.sm});
  font-size: ${(props) => props.theme.fontSizes.sm};
`;

const CitationsLinksContainer = styled.div`
  margin-top: ${(props) => props.theme.space.sm};
`;

const CitationsLinksWrapper = styled.div`
  margin-top: ${(props) => props.theme.space.sm};
  padding-bottom: ${(props) => props.theme.space.sm};
`;

const CitationLink = styled(Span)`
  color: ${(props) => getColorV8("blue", 600, props.theme)};
  a {
    text-decoration: underline;
  }
`;

const SourcesButtonsContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

export function GenerativeAnswerSourcesList({
  citations,
  testId,
}: GenerativeAnswerSourcesListProps): JSX.Element {
  const { t } = useTranslation();
  const [areCitationsVisible, setAreCitationsVisible] =
    useState<boolean>(false);

  return (
    <SourcesContainer>
      {areCitationsVisible ? (
        <CitationsLinksContainer>
          <Paragraph size="small">
            {t(
              "new-request-form.answer-bot-generative-modal.sources_description",
              "This message was automatically generated using AI and the following article sources:"
            )}
          </Paragraph>
          <CitationsLinksWrapper>
            {citations.map((citation, index) => (
              <CitationLink key={citation.article_id}>
                <Anchor
                  id={`${testId}-source-link-${index}`}
                  href={citation.html_url}
                  target="_blank"
                >
                  {citation.title}
                </Anchor>
                {index < citations.length - 1 && ", "}
              </CitationLink>
            ))}
          </CitationsLinksWrapper>
        </CitationsLinksContainer>
      ) : (
        <SourcesButtonsContainer>
          <Span>
            <Span.StartIcon>
              <SparkleIcon />
            </Span.StartIcon>
            {t(
              "new-request-form.answer-bot-generative-modal.generated_by_ai",
              "Generated by AI"
            )}
          </Span>
          <Button
            size="small"
            isBasic
            onClick={() => setAreCitationsVisible(true)}
            id={`${testId}-show-sources-button`}
          >
            {t(
              "new-request-form.answer-bot-generative-modal.view_sources",
              "View Sources"
            )}
          </Button>
        </SourcesButtonsContainer>
      )}
    </SourcesContainer>
  );
}
