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

function Satisfied() {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const navigate = useNavigate();
  const { birthdate, partnerBirthdate, satisfied } = useSelector(
    selectors.selectQuestionnaire
  );
  const [zodiacSign, partnerZodiacSign] = [
    getZodiacSignByDate(birthdate),
    getZodiacSignByDate(partnerBirthdate),
  ];

  const { animationData: animationSun } = useLottie({
    loadKey: satisfied === "yes" ? ELottieKeys.sun : undefined,
  });

  const { animationData: animationUmbrella } = useLottie({
    loadKey: satisfied === "no" ? ELottieKeys.umbrella : undefined,
  });

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

  const handleNext = () => {
    navigate(
      `${routes.client.questionnaireV1()}/relationships/emotionalConnection`
    );
  };

  return (
    <section className={`${styles.page} page`}>
      <div
        className={styles["background_wrap"]}
        style={{
          backgroundImage: `url(/satisfied-${satisfied}.webp)`,
        }}
      />
      <Header
        classNameTitle={styles["header-title"]}
        isBackButtonVisible={false}
      />
      {satisfied === "yes" && (
        // <div
        //   style={{
        //     width: "100%",
        //     aspectRatio: "337 / 406",
        //   }}
        // >
        <>
          {animationSun && (
            <DotLottieReact
              className={`${styles["lottie-animation"]} ym-hide-content`}
              data={animationSun}
              autoplay
              loop={false}
            />
          )}
        </>
        // </div>
      )}
      {satisfied === "no" && (
        <div
          style={{
            width: "100%",
            aspectRatio: "310 / 300",
          }}
        >
          {animationUmbrella && (
            <DotLottieReact
              className={`${styles["lottie-animation"]} ym-hide-content`}
              data={animationUmbrella}
              autoplay
              loop={false}
            />
          )}
        </div>
      )}
      <div>
        {satisfied === "yes" && (
          <>
            <Title variant="h1" className={styles.title}>
              {translate("/satisfied-result-yes.title")}
            </Title>
            <p className={styles.text}>
              {translate("/satisfied-result-yes.description", {
                zodiacSign: translate(
                  `zodiac_signs.${zodiacSign?.toLowerCase()}`
                ),
                partnerZodiacSign: translate(
                  `zodiac_signs.${partnerZodiacSign?.toLowerCase()}`
                ),
              })}
            </p>
          </>
        )}
        {satisfied !== "yes" && (
          <>
            <Title variant="h1" className={styles.title}>
              {translate("/satisfied-result-no.title")}
            </Title>
            <p className={styles.text}>
              {translate("/satisfied-result-no.description", {
                zodiacSign: translate(
                  `zodiac_signs.${zodiacSign?.toLowerCase()}`
                ),
                partnerZodiacSign: translate(
                  `zodiac_signs.${partnerZodiacSign?.toLowerCase()}`
                ),
              })}
            </p>
          </>
        )}
      </div>
      <div className={styles["buttons-container"]}>
        <MainButton
          className={`${styles.button} ${styles["back-button"]}`}
          onClick={handleBack}
        >
          {translate("back")}
        </MainButton>
        <MainButton
          className={`${styles.button} ${styles["next-button"]}`}
          onClick={handleNext}
        >
          {translate("next")}
        </MainButton>
      </div>
    </section>
  );
}

export default Satisfied;
