import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
import { useUpdateStep } from "@/components/ChatsPath/hooks/useUpdateStep";
import routes from "@/routes";
import { IAnswer } from "@/components/ChatsPath/data";
import Answers from "@/components/ChatsPath/components/Answers";
import AnswerDescription, {
  IAnswerDescriptionProps,
} from "@/components/ChatsPath/components/AnswerDescription";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import Button from "@/components/ChatsPath/ui/Button";
import { useSession } from "@/hooks/session/useSession";
import { ESourceAuthorization } from "@/api/resources/User";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function HeadOrHeart() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const { updateSession } = useSession();
  useUpdateStep(15);
  const navigate = useNavigate();
  const answer = useSelector(selectors.selectAnswers)?.headOrHeart;

  const handleNext = async () => {
    const _answer = answers.find((item) => item.value === answer);
    if (_answer) {
      await updateSession(
        {
          answers: {
            headOrHeart: _answer.name as string,
          },
        },
        ESourceAuthorization["aura.chats"]
      );
    }
    navigate(routes.client.chatsQuizHowConfident());
  };

  const answers: IAnswer[] = [
    {
      id: 1,
      value: "heart",
      name: translate("/quiz/headOrHeart.answer_1"),
      questionId: "headOrHeart",
    },
    {
      id: 2,
      value: "head",
      name: translate("/quiz/headOrHeart.answer_2"),
      questionId: "headOrHeart",
    },
    {
      id: 3,
      value: "both",
      name: translate("/quiz/headOrHeart.answer_3"),
      questionId: "headOrHeart",
    },
  ];

  const descriptions: Record<string, IAnswerDescriptionProps> = {
    heart: {
      title: translate("/quiz/headOrHeart.description_title_1"),
      description: translate("/quiz/headOrHeart.description_text_1"),
    },
    head: {
      title: translate("/quiz/headOrHeart.description_title_2"),
      description: translate("/quiz/headOrHeart.description_text_2"),
    },
    both: {
      title: translate("/quiz/headOrHeart.description_title_3"),
      description: translate("/quiz/headOrHeart.description_text_3"),
    },
  };

  return (
    <>
      <h2 className={`chats-answers-title ${styles.title}`}>
        {translate("/quiz/headOrHeart.title")}
      </h2>
      <Answers activeAnswer={answer} answers={answers} />
      {!!answer && (
        <AnswerDescription
          title={descriptions[answer]?.title}
          description={descriptions[answer]?.description}
        />
      )}
      {!!answer && (
        <Button classNameContainer={styles.button} onClick={handleNext}>
          {translate("continue")}
        </Button>
      )}
    </>
  );
}

export default HeadOrHeart;
