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";

function RelationshipZodiacInfoPage() {
  const navigate = useNavigate();
  const { gender, partnerGender, birthdate, partnerBirthdate } = useSelector(
    selectors.selectQuestionnaire
  );
  const [zodiacSign, partnerZodiacSign] = [
    getZodiacSignByDate(birthdate),
    getZodiacSignByDate(partnerBirthdate),
  ];
  const randomCompatibility = useMemo(() => {
    const replaceValues = {
      _gender_: gender,
      _zodiacSign_: zodiacSign,
      _partnerGender_: partnerGender,
      _partnerZodiacSign_: partnerZodiacSign,
    };

    let result =
      zodiacSignsCompatibility[
        getRandomArbitrary(0, zodiacSignsCompatibility.length)
      ];

    for (const key in replaceValues) {
      result = result.replace(
        key,
        String(replaceValues[key as keyof typeof replaceValues])
      );
    }

    return result;
  }, [gender, partnerGender, partnerZodiacSign, zodiacSign]);

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

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

  return (
    <section className={`${styles.page} page`}>
      <div className={styles["image-container"]}>
        <img
          src={`/questionnaire/zodiacs/${gender}/${zodiacSign?.toLowerCase()}.webp`}
          alt="The zodiac signs"
        />
        <img src="/plus.svg" alt="Plus" />
        <img
          src={`/questionnaire/zodiacs/${partnerGender}/${partnerZodiacSign?.toLowerCase()}.webp`}
          alt="The zodiac signs"
        />
      </div>
      <div className={styles["compatibility-description-container"]}>
        <Title variant="h1" className={styles.title}>
          {partnerZodiacSign} {partnerGender}s
        </Title>
        <p className={styles.text}>{randomCompatibility}</p>
      </div>
      <div className={styles["text-container"]}>
        <Title variant="h1" className={styles.title}>
          So how compatible are you?
        </Title>
        <p className={styles.text}>Let's go further and find out</p>
      </div>
      <div className={styles["buttons-container"]}>
        <MainButton
          className={`${styles.button} ${styles["back-button"]}`}
          onClick={handleBack}
        >
          Back
        </MainButton>
        <MainButton
          className={`${styles.button} ${styles["next-button"]}`}
          onClick={handleNext}
        >
          Next
        </MainButton>
      </div>
    </section>
  );
}

export default RelationshipZodiacInfoPage;