import { Navigate, useNavigate, useParams } from "react-router-dom";
import styles from "./styles.module.scss";
import routes from "@/routes";
import Title from "@/components/Title";
import { useEffect, useMemo, useState } from "react";
import { sleep } from "@/services/date";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { useSession } from "@/hooks/session/useSession";
import { ESourceAuthorization } from "@/api/resources/User";

function RelateFollowing() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const { updateSession } = useSession();
  const navigate = useNavigate();
  const { questionId } = useParams();
  const [activeButton, setActiveButton] = useState<number | null>();

  const questions: {
    id:
      | "time_alone"
      | "own_company"
      | "socializing_in_groups"
      | "loneliness_avoid"
      | "activities_independently";
    title: string;
  }[] = useMemo(
    () => [
      {
        id: "time_alone",
        title: translate("/relate-following.question1"),
      },
      {
        id: "own_company",
        title: translate("/relate-following.question2"),
      },
      {
        id: "socializing_in_groups",
        title: translate("/relate-following.question3"),
      },
      {
        id: "loneliness_avoid",
        title: translate("/relate-following.question4"),
      },
      {
        id: "activities_independently",
        title: translate("/relate-following.question5"),
      },
    ],
    [translate]
  );
  useEffect(() => {
    setActiveButton(null);
  }, [questionId]);

  if (!questionId)
    return <Navigate to={`${routes.client.palmistryV1RelateFollowing()}/1`} />;

  const handleClick = async (answerIndex: number) => {
    setActiveButton(answerIndex);
    await updateSession(
      {
        answers: {
          [questions[parseInt(questionId) - 1].id]: answerIndex + 1,
        },
      },
      ESourceAuthorization["aura.palmistry.new"]
    );
    await sleep(400);
    if (Number(questionId) < questions.length) {
      return navigate(
        `${routes.client.palmistryV1RelateFollowing()}/${
          Number(questionId) + 1
        }`
      );
    }
    return navigate(routes.client.palmistryV1LetScan());
  };

  return (
    <div>
      <Title variant="h2" className={styles.title}>
        {translate("/relate-following.title")}
      </Title>
      <p className={styles.question}>
        <q>{questions[parseInt(questionId) - 1].title}</q>
      </p>
      <div className={styles["buttons-container"]}>
        {Array.from({ length: 5 }).map((_, index) => (
          <button
            key={index}
            className={`${styles.button} ${
              activeButton === index ? styles.selected : ""
            }`}
            onClick={() => handleClick(index)}
          >
            {index + 1}
          </button>
        ))}
      </div>
      <div className={styles["buttons-text-container"]}>
        <span>{translate("/relate-following.strongly_disagree")}</span>
        <span>{translate("/relate-following.strongly_agree")}</span>
      </div>
    </div>
  );
}

export default RelateFollowing;