// import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import styles from "./styles.module.scss";
// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import Title from "@/components/Title";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import Button from "../../components/Button";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";

// const animations = {
//   both: ELottieKeys.scalesNeutralPalmistry,
//   heart: ELottieKeys.scalesHeartPalmistry,
//   head: ELottieKeys.scalesHeadPalmistry,
//   depends: ELottieKeys.scalesNeutralPalmistry,
// };

function HeadOrHeartResult() {
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const { headOrHeart } = useSelector(selectors.selectPalmistryV1Answers);
  const { gender } = useSelector(selectors.selectQuestionnaire);

  // const { animationData } = useLottie({
  //   loadKey: animations[headOrHeart as keyof typeof animations],
  // });

  const birthdate = useSelector(selectors.selectBirthdate);
  const zodiacSign = getZodiacSignByDate(birthdate);

  const handleBack = () => {
    navigate(-1);
  };

  const handleNext = () => {
    // navigate(`${routes.client.palmistryV1RelateFollowing()}/1`);
    navigate(routes.client.palmistryV1LetScan());
  };

  return (
    <section className={styles.container}>
      {/* <div className={styles["animation-container"]}>
        {animationData && (
          <DotLottieReact
            className={`${styles["lottie-animation"]} ym-hide-content`}
            data={animationData}
            autoplay
            loop={false}
          />
        )}
      </div> */}
      <Title variant="h1" className={styles.title}>
        {headOrHeart === "both" &&
          translate("/both.title", {
            wonderful: (
              <b style={{ color: "#224e90" }}>{translate("/both.wonderful")}</b>
            ),
            zodiacSign: (
              <b style={{ color: "#224e90" }}>
                {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
              </b>
            ),
            gender: translate(gender?.toLowerCase()).toLowerCase()
          })}
        {headOrHeart === "head" &&
          translate("/with-head.title", {
            zodiacSign: (
              <b style={{ color: "#224e90" }}>
                {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
              </b>
            ),
            gender: translate(gender?.toLowerCase()).toLowerCase()
          })}
        {headOrHeart === "heart" &&
          translate("/with-heart.title", {
            zodiacSign: (
              <b style={{ color: "#224e90" }}>
                {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
              </b>
            ),
            gender: translate(gender?.toLowerCase()).toLowerCase()
          })}
        {headOrHeart === "depends" &&
          translate("/depends.title", {
            zodiacSign: (
              <b style={{ color: "#224e90" }}>
                {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
              </b>
            ),
            gender: translate(gender?.toLowerCase()).toLowerCase()
          })
        }
      </Title>
      <div className={styles["buttons-container"]}>
        <Button
          className={`${styles.button} ${styles["back-button"]}`}
          onClick={handleBack}
        >
          {translate("back")}
        </Button>
        <Button
          className={`${styles.button} ${styles["next-button"]}`}
          onClick={handleNext}
        >
          {translate("next")}
        </Button>
      </div>
    </section>
  );
}

export default HeadOrHeartResult;