import { useSelector } from "react-redux";
import styles from "./styles.module.css";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { IZodicSignsInfo } from "@/data";
import Title from "@/components/Title";
import Header from "../../components/Header";
import QuestionnaireGreenButton from "../../ui/GreenButton";
import { zodiacSignsInfo } from "../../data/zodiacSignsInfo";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function SingleZodiacInfoPage() {
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const birthdate = useSelector(selectors.selectQuestionnaire).birthdate;
  const gender = useSelector(selectors.selectQuestionnaire).gender;
  const zodiac = getZodiacSignByDate(birthdate);
  const zodiacInfo = zodiacSignsInfo[gender as keyof IZodicSignsInfo]?.find(
    (sign) => sign.name === zodiac
  );

  const image = zodiacInfo?.img;

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

  return (
    <section className={`${styles.page} page`}>
      <div className={styles["background_wrap"]} />
      <div className={styles.substrate} />
      <Header
        isBackButtonVisible={false}
        classNameTitle={styles["header-title"]}
      />
      <img
        className={styles.image}
        src={image}
        alt="The image of the zodiac sign"
      />
      <div className={styles["zodiac-info-container"]}>
        <Title variant="h2" className={styles.title}>
          {translate(`zodiac_signs.${zodiac.toLowerCase()}`)} {translate(`${gender}s`)}s
        </Title>
        <p className={styles.description}>
          {translate(`zodiac_signs_description.${gender}.${zodiac.toLowerCase()}`)}
        </p>
      </div>
      <div className={styles["buttons-container"]}>
        <QuestionnaireGreenButton onClick={handleNext}>
          {translate("next")}
        </QuestionnaireGreenButton>
      </div>
    </section>
  );
}

export default SingleZodiacInfoPage;
