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

function GuidanceArea() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const { updateSession } = useSession();
  useUpdateStep(27);
  const navigate = useNavigate();
  const answer = useSelector(selectors.selectAnswers)?.guidanceArea;

  const handleNext = async () => {
    if (!answer?.length) return;
    await updateSession(
      {
        answers: {
          guidanceArea: answer,
        },
      },
      ESourceAuthorization["aura.chats"]
    );
    navigate(routes.client.chatsQuizPsychicComfortable());
  };

  const answers: TMultiplyAnswer[] = [
    {
      id: 1,
      value: "love_relationship",
      name: translate("/quiz/guidanceArea.answer_1"),
      questionId: "guidanceArea",
      isWithIcon: true,
    },
    {
      id: 2,
      value: "destiny_life",
      name: translate("/quiz/guidanceArea.answer_2"),
      questionId: "guidanceArea",
      isWithIcon: true,
    },
    {
      id: 3,
      value: "career_work",
      name: translate("/quiz/guidanceArea.answer_3"),
      questionId: "guidanceArea",
      isWithIcon: true,
    },
    {
      id: 4,
      value: "future_telling",
      name: translate("/quiz/guidanceArea.answer_4"),
      questionId: "guidanceArea",
      isWithIcon: true,
    },
    {
      id: 5,
      value: "family_friends",
      name: translate("/quiz/guidanceArea.answer_5"),
      questionId: "guidanceArea",
      isWithIcon: true,
    },
    {
      id: 6,
      value: "spirit_guidance",
      name: translate("/quiz/guidanceArea.answer_6"),
      questionId: "guidanceArea",
      isWithIcon: true,
    },
  ];

  return (
    <>
      <h2 className={`chats-answers-title ${styles.title}`}>
        {translate("/quiz/guidanceArea.title")}
      </h2>
      <h3 className={styles.subtitle}>
        {translate("/quiz/guidanceArea.description")}
      </h3>
      <MultiplyAnswers answers={answers} />
      <Button
        disabled={!answer?.length}
        classNameContainer={styles.button}
        onClick={handleNext}
      >
        {translate("continue")}
      </Button>
    </>
  );
}

export default GuidanceArea;
