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 ZodiacIconSVG from "../../ui/ZodiacIconSVG";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

const currentGoal: Record<string, string> = {
  about_ex: "/profileIntro.goal_1",
  give_advice: "/profileIntro.goal_2",
  give_guidance: "/profileIntro.goal_3",
  all: "/profileIntro.goal_4",
  default: "/profileIntro.goal_4",
};

const currentRelationshipStatus: Record<string, string> = {
  single: "/profileIntro.relationship_1",
  relationship: "/profileIntro.relationship_2",
  married: "/profileIntro.relationship_3",
  complicated: "/profileIntro.relationship_4",
  other: "/profileIntro.relationship_5",
  default: "/profileIntro.relationship_5",
};

const currentDescription: Record<string, string> = {
  about_ex: "/profileIntro.description_1",
  give_advice: "/profileIntro.description_2",
  give_guidance: "/profileIntro.description_3",
  all: "/profileIntro.description_4",
  default: "/profileIntro.description_4",
};

function ProfileIntro() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const navigate = useNavigate();
  const birthdate = useSelector(selectors.selectBirthdate);
  const zodiac = getZodiacSignByDate(birthdate);
  const { goal, relationshipStatus } = useSelector(selectors.selectAnswers);

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

  return (
    <section className={styles.container}>
      <img
        className={styles.image}
        src={images("big_thumbs_up.webp")}
        alt="Thumbs up"
        width="120"
        height="120"
      />
      <Title className={styles.title} variant="h2">
        {translate("/profileIntro.title")}
      </Title>
      <Title className={styles.subtitle} variant="h3">
        {translate("/profileIntro.text")}
      </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("/profileIntro.zodiac_sign")}
            </p>
            <p className={styles["trait-value"]}>
              <span>{translate(`zodiac_signs.${zodiac.toLowerCase()}`)}</span>
              <ZodiacIconSVG zodiac={zodiac} />
            </p>
          </li>
          <li className={styles.item}>
            <p className={styles["trait-name"]}>
              {translate("/profileIntro.your_goal")}
            </p>
            <p className={styles["trait-value"]}>
              {translate(currentGoal[goal] || currentGoal.default)}
            </p>
          </li>
          <li className={styles.item}>
            <p className={styles["trait-name"]}>
              {translate("/profileIntro.relationship_status")}
            </p>
            <p className={styles["trait-value"]}>
              {translate(
                currentRelationshipStatus[relationshipStatus] ||
                  currentRelationshipStatus.default
              )}
            </p>
          </li>
        </ul>
      </div>
      <p className={styles.text}>
        {translate("/profileIntro.description", {
          description: (
            <strong>
              {translate(
                currentDescription[goal] || currentDescription.default
              )}
            </strong>
          ),
        })}
      </p>
      <Button classNameContainer={styles.button} onClick={handleNext}>
        {translate("continue")}
      </Button>
    </section>
  );
}

export default ProfileIntro;
