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 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 { 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 { useSession } from "@/hooks/session/useSession";
import { EGender, ESourceAuthorization } from "@/api/resources/User";
import Answer from "../../components/Answer";
import metricService from "@/services/metric/metricService";

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

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

  const localGenders = genders.map((gender) => ({
    id: gender.id,
    title: <>
      <span className={styles.genderIcon}>
        {gender.id === "male" ? "🙋‍♂️" : "🙋‍♀️"}
      </span>
      {translate(gender.id, undefined, ELocalesPlacement.V1)}
    </>,
  }));

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

  const handleNext = useCallback(async () => {
    if (!partnerGender) 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.v4"]
    );
    if (session?.sessionId?.length) {
      updateSession(
        {
          // profile: {
          //   gender: EGender[gender as keyof typeof EGender],
          // },
          partner: {
            gender: EGender[partnerGender as keyof typeof EGender],
          }
        },
        ESourceAuthorization["aura.compatibility.v4"],
        session.sessionId
      );
      metricService.userParams({
        sessionId: session.sessionId,
      });
    }
    return navigate(routes.client.compatibilityV4PartnerSimilarity());
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [partnerGender, navigate]);

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

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

export default GenderPartner;
