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 TabSVG from "../../images/SVG/Tab";
import { usePreloadImages } from "@/hooks/preload/images";
import { IAnswersSessionCompatibilityV2 } from "@/api/resources/Session";
import { useSession } from "@/hooks/session/useSession";
import { ESourceAuthorization } from "@/api/resources/User";

function FavoriteColor() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const { updateSession } = useSession();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { favoriteColor } = useSelector(selectors.selectCompatibilityV2Answers);
  usePreloadImages([
    "/v1/palmistry/trial-payment/girl.png",
    "/v1/palmistry/reviews.png",
    "/v1/palmistry/trial-payment/avatar-1.png",
    "/v1/palmistry/trial-payment/avatar-2.png",
    "/v1/palmistry/trial-payment/avatar-3.png",
    "/v1/palmistry/trial-payment/avatar-4.png",
  ]);

  const answers: {
    id: IAnswersSessionCompatibilityV2["favorite_color"];
    title: string;
    color?: string;
  }[] = useMemo(
    () => [
      {
        id: "blue",
        title: translate("/favorite-color.answer1"),
      },
      {
        id: "green",
        title: translate("/favorite-color.answer2"),
        color: "#20C63B",
      },
      {
        id: "red",
        title: translate("/favorite-color.answer5"),
        color: "#FB3334",
      },
      {
        id: "yellow",
        title: translate("/favorite-color.answer6"),
        color: "#E4DD29",
      },
      {
        id: "violet",
        title: translate("/favorite-color.answer4"),
        color: "#7B29E4",
      },
      // {
      //   id: "orange",
      //   title: translate("/favorite-color.answer3"),
      //   color: "#EFA006",
      // },
      {
        id: "turquoise",
        title: translate("/favorite-color.answer7"),
        color: "#00C6C6",
      },
    ],
    [translate]
  );

  const handleClick = async (id: IAnswersSessionCompatibilityV2["favorite_color"]) => {
    dispatch(actions.compatibilityV2Answers.update({ favoriteColor: id }));
    updateSession({
      answers: {
        favorite_color: id,
      },
    }, ESourceAuthorization["aura.compatibility.v2"]);
    if (id !== favoriteColor) await sleep(answerTimeOut);
    navigate(routes.client.compatibilityV2HeadOrHeart());
  };

  return (
    <div className={styles.container}>
      <Title variant="h2" className={styles.title}>
        {translate("/favorite-color.title")}
      </Title>
      {answers.map((answers, index) => (
        <Answer
          key={index}
          answer={answers}
          isSelected={favoriteColor === answers.id}
          onClick={() => handleClick(answers.id)}
          className={styles.answer}
          selectedClassName={styles.selected}
        >
          <TabSVG className={styles.tab} color={answers.color} />
          <p>{answers.title}</p>
        </Answer>
      ))}
    </div>
  );
}

export default FavoriteColor;
