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 MultiplyAnswers from "@/components/ChatsPath/components/MultiplyAnswers";
import Button from "@/components/ChatsPath/ui/Button";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import Tip from "@/components/ChatsPath/components/Tip";
import { ESourceAuthorization } from "@/api/resources/User";
import { useSession } from "@/hooks/session/useSession";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function PsychicComfortable() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const { updateSession } = useSession();
  useUpdateStep(28);
  const navigate = useNavigate();
  const answer = useSelector(selectors.selectAnswers)?.psychicComfortable;

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

  const answers: IAnswer[] = [
    {
      id: 1,
      value: "straightforward_and_honest",
      name: translate("/quiz/psychicComfortable.answer_1"),
      questionId: "psychicComfortable",
    },
    {
      id: 2,
      value: "soft_and_empathetic",
      name: translate("/quiz/psychicComfortable.answer_2"),
      questionId: "psychicComfortable",
    },
    {
      id: 3,
      value: "patient_and_grounded",
      name: translate("/quiz/psychicComfortable.answer_3"),
      questionId: "psychicComfortable",
    },
    {
      id: 4,
      value: "proactive",
      name: translate("/quiz/psychicComfortable.answer_4"),
      questionId: "psychicComfortable",
    },
    {
      id: 5,
      value: "encouraging",
      name: translate("/quiz/psychicComfortable.answer_5"),
      questionId: "psychicComfortable",
    },
    {
      id: 6,
      value: "all",
      name: translate("/quiz/psychicComfortable.answer_6"),
      questionId: "psychicComfortable",
    },
  ];

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

export default PsychicComfortable;
