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 { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { getRandomArbitrary } from "@/services/random-value";
import { zodiacSignsCompatibility } from "@/data/zodiacSignsCompatibility";
import { useMemo } from "react";
import Header from "../../components/Header";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function RelationshipZodiacInfoPage() {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const navigate = useNavigate();
  const { gender, partnerGender, birthdate, partnerBirthdate } = useSelector(
    selectors.selectQuestionnaire
  );
  const [zodiacSign, partnerZodiacSign] = [
    getZodiacSignByDate(birthdate),
    getZodiacSignByDate(partnerBirthdate),
  ];
  const randomCompatibility = useMemo(() => {
    return translate(
      `/relationship-zodiac-info.compatibilities.description${getRandomArbitrary(
        1,
        zodiacSignsCompatibility.length + 1
      )}`,
      {
        gender: translate(gender?.toLowerCase()),
        zodiacSign: translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`),
        partnerGender: translate(partnerGender?.toLowerCase()),
        partnerZodiacSign: translate(
          `zodiac_signs.${partnerZodiacSign?.toLowerCase()}`
        ),
      }
    );
  }, [gender, partnerGender, partnerZodiacSign, translate, zodiacSign]);

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

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

  return (
    <section className={`${styles.page} page`}>
      <div className={styles["background_wrap"]} />
      <Header
        isBackButtonVisible={false}
        classNameTitle={styles["header-title"]}
      />
      <div className={styles["image-container"]}>
        <img
          src={`/questionnaire-redesign/zodiacs/${gender}/pdf.sex.${zodiacSign?.toUpperCase()}.${gender.toUpperCase()}.webp`}
          alt="The zodiac signs"
        />
        <img src="/plus.svg" alt="Plus" />
        <img
          src={`/questionnaire-redesign/zodiacs/${partnerGender}/pdf.sex.${partnerZodiacSign?.toUpperCase()}.${partnerGender.toUpperCase()}.webp`}
          alt="The zodiac signs"
        />
      </div>
      <div className={styles["compatibility-description-container"]}>
        <Title
          variant="h1"
          className={`${styles.title} ${styles["title-zodiac"]}`}
        >
          {translate(`zodiac_signs.${partnerZodiacSign?.toLowerCase()}`)}{" "}
          {translate(`${partnerGender?.toLowerCase()}s`).toLowerCase()}
        </Title>
        <p className={styles.text}>{randomCompatibility}</p>
      </div>
      <div className={styles["text-container"]}>
        <div className={styles["text-substrate"]}>
          <Title variant="h1" className={styles.title}>
            {translate("/relationship-zodiac-info.description")}
          </Title>
          <p className={styles.text}>
            {translate("/relationship-zodiac-info.how_compatible_you")}
          </p>
        </div>
      </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 RelationshipZodiacInfoPage;
