import Title from "@/components/Title";
import styles from "./styles.module.scss";
import Answer from "../../components/Answer";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { sleep } from "@/services/date";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { answerTimeOut } from "../../data";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { useMemo } from "react";
import { usePreloadImages } from "@/hooks/preload/images";

function HeadOrHeart() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { headOrHeart } = useSelector(selectors.selectPalmistryV1Answers);
  usePreloadImages([
    "/v1/palmistry/money-back.svg",
    "/v1/palmistry/hand.svg",
    "/v1/palmistry/1_1.svg",
    "/v1/palmistry/daily.svg",
    "/v1/palmistry/cosmic.svg",
    "/v1/palmistry/calendar.svg",
    "/v1/palmistry/reviews/rebecca.png",
    "/v1/palmistry/reviews/mika.png",
    "/v1/palmistry/reviews/amanda.png",
    "/v1/palmistry/partners.png",
  ]);

  const answers = useMemo(
    () => [
      {
        id: "heart",
        title: translate("/head-or-heart.answer1"),
      },
      {
        id: "head",
        title: translate("/head-or-heart.answer2"),
      },
      {
        id: "both",
        title: translate("/head-or-heart.answer3"),
      },
    ],
    [translate]
  );

  const handleClick = async (id: string) => {
    dispatch(actions.palmistryV1Answers.update({ headOrHeart: id }));
    if (id !== headOrHeart) await sleep(answerTimeOut);
    navigate(routes.client.palmistryV1HeadOrHeartResult());
  };

  return (
    <div className={styles.container}>
      <Title variant="h2" className={styles.title}>
        {translate("/head-or-heart.title")}
      </Title>
      {answers.map((answers, index) => (
        <Answer
          key={index}
          answer={answers}
          isSelected={headOrHeart === answers.id}
          onClick={() => handleClick(answers.id)}
        />
      ))}
    </div>
  );
}

export default HeadOrHeart;
