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";
import { useSelector } from "react-redux";
import { selectors } from "@/store";

function RelateFollowing() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
  const { updateSession } = useSession();
  const navigate = useNavigate();
  const { questionId } = useParams();
  const [activeButton, setActiveButton] = useState<number | null>();
  const { relationshipStatus } = useSelector(selectors.selectCompatibilityV4Answers);
  const isSingle = relationshipStatus === "single";

  const questions: {
    id: "partner_expectations";
    title: string;
  }[] = useMemo(
    () => [
      {
        id: "partner_expectations",
        title: translate("/relate-following.question1"),
      },
      // {
      //   id: "romantic_gestures",
      //   title: translate("/relate-following.question2"),
      // },
      // {
      //   id: "checking_phone",
      //   title: translate("/relate-following.question3"),
      // },
    ],
    [translate]
  );
  useEffect(() => {
    setActiveButton(null);
  }, [questionId]);

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

  const handleClick = async (answerIndex: number) => {
    setActiveButton(answerIndex);
    updateSession(
      {
        answers: {
          [questions[parseInt(questionId) - 1].id]: answerIndex + 1 as 1 | 2 | 3 | 4 | 5,
        },
      },
      ESourceAuthorization["aura.compatibility.v4"]
    );
    await sleep(400);
    if (Number(questionId) < questions.length) {
      return navigate(
        `${routes.client.compatibilityV4RelateFollowing()}/${Number(questionId) + 1
        }`
      );
    }
    if (isSingle) return navigate(routes.client.compatibilityV4PartnerPassword());
    return navigate(routes.client.compatibilityV4CheckingPhone());
  };

  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;
