import React from "react";

import Button from "../button/button";
import useSteps from "../../../hooks/palmistry/use-steps";
import { useSession } from "@/hooks/session/useSession";
import { ESourceAuthorization } from "@/api/resources/User";
import { ELocalesPlacement } from "@/locales";
import { useTranslations } from "@/hooks/translations";

enum AnswerOption {
  One = "1",
  Two = "2",
  Three = "3",
  Four = "4",
  Five = "5",
}

const sessionNames = [
  "time_alone",
  "own_company",
  "socializing_in_groups",
  "loneliness_avoid",
  "activities_independently",
];

export default function StepPersonalStatement() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV0);
  const steps = useSteps();
  const { updateSession } = useSession();

  const [value, setValue] = React.useState<AnswerOption[]>([]);
  const [currentQuestionNumber, setCurrentQuestionNumber] = React.useState(0);
  const [questionIsVisible, setQuestionIsVisible] = React.useState(true);

  const questions = [
    translate("/personal-statement.question1"),
    translate("/personal-statement.question2"),
    translate("/personal-statement.question3"),
    translate("/personal-statement.question4"),
    translate("/personal-statement.question5"),
  ];

  const onClickButton = async (answer: AnswerOption) => {
    setValue((prevState) => [...prevState, answer]);
    await updateSession(
      {
        answers: {
          [sessionNames[currentQuestionNumber]]: Number(answer),
        },
      },
      ESourceAuthorization["aura.palmistry"]
    );
    if (currentQuestionNumber < questions.length - 1) {
      setCurrentQuestionNumber((prevState) => prevState + 1);
    }

    setQuestionIsVisible(false);
  };

  React.useEffect(() => {
    if (!questionIsVisible) setQuestionIsVisible(true);
  }, [questionIsVisible]);

  React.useEffect(() => {
    if (value.length === questions.length) {
      steps.saveCurrent(value.join(","));
      steps.goNext();
    }
  }, [value]);

  const subtitleClassName = [
    "palmistry-container__personal-statement-subtitle",
  ];
  if (questionIsVisible)
    subtitleClassName.push(
      "palmistry-container__personal-statement-fade-in-animation"
    );

  return (
    <>
      <p>{translate("/personal-statement.title")}</p>

      <p className={subtitleClassName.join(" ")}>
        <q>{questions[currentQuestionNumber]}</q>
      </p>

      <div className="palmistry-container__personal-statement-button-container">
        {Object.values(AnswerOption).map((answer) => (
          <Button
            key={answer}
            type="button"
            className="palmistry-container__personal-statement-button"
            onClick={() => onClickButton(answer)}
          >
            {answer}
          </Button>
        ))}
      </div>

      <div className="palmistry-container__personal-statement-text-block">
        <p>{translate("/personal-statement.strongly_agree")}</p>

        <p>{translate("/personal-statement.strongly_disagree")}</p>
      </div>
    </>
  );
}
