import styles from "./styles.module.scss";
import Title from "@/components/Title";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { Gender } from "@/data";
import PrivacyPolicy from "@/components/pages/ABDesign/v1/components/PrivacyPolicy";
// import Toast from "@/components/pages/ABDesign/v1/components/Toast";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { useCallback, useEffect, useState } from "react";
import { sleep } from "@/services/date";
import metricService from "@/services/metric/metricService";
import { genders } from "@/components/pages/ABDesign/v1/data/genders";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { usePreloadImages } from "@/hooks/preload/images";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { useSession } from "@/hooks/session/useSession";
import { EGender, ESourceAuthorization } from "@/api/resources/User";
import AlreadyHaveAccount from "@/components/ui/AlreadyHaveAccount";
import Answer from "../../components/Answer";

function GenderPage() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { createSession, updateSession } = useSession();
  const { checked: privacyPolicyChecked } = useSelector(
    selectors.selectPrivacyPolicy
  );

  const { gender } = useSelector(selectors.selectQuestionnaire);
  const [isSelected, setIsSelected] = useState(false);
  usePreloadImages(["/v1/palmistry/hand-with-eye.svg"]);
  useLottie({
    preloadKey: ELottieKeys.handSymbols,
  });

  const localGenders = genders.map((gender) => ({
    id: gender.id,
    title: translate(gender.id, undefined, ELocalesPlacement.V1),
  }));

  const selectGender = (_gender: Gender | null) => {
    dispatch(actions.privacyPolicy.updateChecked(true));
    setIsSelected(true);
    dispatch(actions.questionnaire.update({ gender: _gender?.id }));
  };

  const handleNext = useCallback(async () => {
    if (!gender) return;
    dispatch(actions.privacyPolicy.updateChecked(true));
    await sleep(1000);
    metricService.userParams({
      gender: genders.find((g) => g.id === gender)?.name,
    });
    const session = await createSession(
      ESourceAuthorization["aura.compatibility.v2"]
    );
    if (session?.sessionId?.length) {
      updateSession(
        {
          profile: {
            gender: EGender[gender as keyof typeof EGender],
          },
        },
        ESourceAuthorization["aura.compatibility.v2"],
        session.sessionId
      );
      metricService.userParams({
        sessionId: session.sessionId,
      });
    }
    return navigate(routes.client.compatibilityV2Birthdate());
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [gender, navigate]);

  useEffect(() => {
    if (privacyPolicyChecked && gender && isSelected) {
      handleNext();
    }
  }, [gender, handleNext, isSelected, privacyPolicyChecked]);

  return (
    <>
      <Title variant="h2" className={styles.title}>
        {translate("/gender.title")}
      </Title>
      <p className={styles.description}>{translate("/gender.description", {
        br: <br />,
      })}</p>
      {/* <ChooseGender onSelectGender={selectGender} /> */}
      <PrivacyPolicy containerClassName={styles["privacy-policy"]} haveCheckbox={false} />
      <div className={styles["genders-container"]}>
        {localGenders.map((_gender, index) => (
          <Answer
            key={index}
            answer={_gender}
            isSelected={gender === _gender.id}
            onClick={() => selectGender(genders.find((g) => g.id === _gender.id) ?? null)}
          />
        ))}
      </div>
      <AlreadyHaveAccount text={translate("/gender.already_have_account")} />
      {/* {gender && !privacyPolicyChecked && (
        <Toast classNameContainer={styles["toast-container"]} variant="error">
          {translate("/gender.toast", undefined, ELocalesPlacement.V1)}
        </Toast>
      )} */}
    </>
  );
}

export default GenderPage;