import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import Button from "../../ui/Button";
import { images } from "../../data";
import { whatEmotionAnswers } from "../../data/whatEmotionAnswers";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { yourGoalAnswers } from "../../data/yourGoalAnswers";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

const currentAreaOfImprovement: Record<string, string> = {
  love_happiness: "/preferencesIntro.love_happiness",
  default: "/preferencesIntro.default",
};

function PreferencesIntro() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const navigate = useNavigate();
  const { whatEmotion, missingInLife, goal, yourGoal } = useSelector(
    selectors.selectAnswers
  );

  const handleNext = () => {
    navigate(routes.client.chatsQuizBelieveInSpirituality());
  };

  return (
    <section className={styles.container}>
      <img
        className={styles.image}
        src={images("orbited_heart.webp")}
        alt="orbited heart"
        width="120"
        height="120"
      />
      <Title className={styles.title} variant="h2">
        {translate("/preferencesIntro.title")}
      </Title>
      <Title className={styles.subtitle} variant="h3">
        {translate("/preferencesIntro.subtitle")}
      </Title>
      <div className={styles.summary}>
        <div className={styles.indicator}>
          <div className={styles.progress}></div>
          <div className={styles.pointer}>
            <img
              src={images("profile-intro-star.svg")}
              alt="Star"
              width="14"
              height="14"
            />
          </div>
        </div>
        <ul className={styles.list}>
          <li className={styles.item}>
            <p className={styles["trait-name"]}>
              {translate("/preferencesIntro.you_are")}
            </p>
            <p className={styles["trait-value"]}>
              <span>
                {translate(
                  (whatEmotionAnswers.find(
                    (answer) => answer.value === whatEmotion
                  )?.name as string) || "unknown"
                )}
              </span>
            </p>
          </li>
          <li className={styles.item}>
            <p className={styles["trait-name"]}>
              {translate("/preferencesIntro.goal_to_achieve")}
            </p>
            <p className={styles["trait-value"]}>
              {translate(
                (yourGoalAnswers[goal].find(
                  (answer) => answer.value === yourGoal
                )?.name as string) || "unknown"
              )}
            </p>
          </li>
          <li className={styles.item}>
            <p className={styles["trait-name"]}>
              {translate("/preferencesIntro.area_of_improvement")}
            </p>
            <p className={styles["trait-value"]}>
              {translate(
                currentAreaOfImprovement[missingInLife] ||
                  currentAreaOfImprovement.default
              )}
            </p>
          </li>
        </ul>
      </div>
      <p className={styles.text}>
        {translate("/preferencesIntro.description")}
      </p>
      <Button classNameContainer={styles.button} onClick={handleNext}>
        {translate("continue")}
      </Button>
    </section>
  );
}

export default PreferencesIntro;
