import React, { useState } from "react";
import { Text, SVG, Popover, theme } from "@local-logic/core/ui";
import HelpIcon from "~/assets/icons/help.svg";
import HelpOutlinedIcon from "~/assets/icons/help_outline.svg";
import useTranslator from "~/hooks/useTranslator";
import { translations as scoreTranslations } from "~/localization/translation-packs/scores";
import { translations as scoreDescriptionTranslations } from "~/localization/translation-packs/scoreDescriptions";
import useHelpers from "../../useHelpers";
import { useRootElement } from "../context";
import * as S from "./styles";

interface DescriptionProps {
  ctaClicked: () => void;
}

export const Description = ({ ctaClicked }: DescriptionProps) => {
  const {
    options: { scoresData, score },
    onChange,
  } = useRootElement();
  const { textVal } = useHelpers({ scoresData, score });
  const [popoverOpen, setPopoverOpen] = useState(false);
  const { translations } = useTranslator([
    scoreDescriptionTranslations,
    scoreTranslations,
  ]);

  const event = new CustomEvent("customEvent", {
    detail: { data: "Some data" },
  });

  const onOpenChangeHandler = (e: boolean) => {
    setPopoverOpen(e);
    ctaClicked();
    if (onChange) {
      onChange({ type: "tooltip-toggle", data: e });
    }
  };

  if (!textVal) {
    return null;
  }

  return (
    <S.TextContainer>
      <Text noMargin color="--ll-color-on-surface-variant1">
        {textVal}.
      </Text>
      <Popover.Root open={popoverOpen} onOpenChange={onOpenChangeHandler}>
        <Popover.Trigger>
          <SVG
            SVGElement={popoverOpen ? HelpIcon : HelpOutlinedIcon}
            fill={theme["--ll-color-primary"]}
            height={20}
            width={20}
          />
        </Popover.Trigger>
        <S.Content>
          <Text noMargin color="--ll-color-on-surface-variant1">
            {translations[`${score}-description`]}
          </Text>
        </S.Content>
      </Popover.Root>
    </S.TextContainer>
  );
};