import styles from "./styles.module.css";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import PlacePicker from "@/components/PlacePicker";
import { useState } from "react";
import QuestionnaireGreenButton from "../../../../ui/GreenButton";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { ELocalesPlacement } from "@/locales";
import { useSession } from "@/hooks/session/useSession";
import { ESourceAuthorization } from "@/api/resources/User";

interface IBirthPlaceCustomAnswerProps {
  affiliation?: "self" | "partner";
}

function BirthPlaceCustomAnswer({
  affiliation = "self",
}: IBirthPlaceCustomAnswerProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const { updateSession } = useSession();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const questionnaire = useSelector(selectors.selectQuestionnaire);
  const birthPlace =
    affiliation === "self"
      ? questionnaire.birthPlace
      : questionnaire.partnerBirthPlace;

  const [isKnownPartnerBirthPlace, setIsKnownPartnerBirthPlace] =
    useState(true);

  useLottie({
    preloadKey: ELottieKeys.magnifyingGlassAndPlanet,
  });

  const handleChange = (birthPlace: string) => {
    if (affiliation === "partner") {
      return dispatch(
        actions.questionnaire.update({ partnerBirthPlace: birthPlace })
      );
    }
    // affiliation === "self"
    return dispatch(actions.questionnaire.update({ birthPlace }));
  };

  const handleNext = async () => {
    if (affiliation === "partner") {
      if (isKnownPartnerBirthPlace) {
        await updateSession(
          {
            partner: {
              birthplace: {
                address: birthPlace,
              },
            },
          },
          ESourceAuthorization["aura.main.new"]
        );
      }
      return navigate(routes.client.relationshipAlmostThereV1());
    }
    // affiliation === "self"
    await updateSession(
      {
        profile: {
          birthplace: {
            address: birthPlace,
          },
        },
      },
      ESourceAuthorization["aura.main.new"]
    );
    return navigate(routes.client.loadingInRelationshipV1());
  };

  return (
    <>
      {affiliation === "partner" && (
        <label className={styles["checkbox-container"]} htmlFor="isKnown">
          <input
            id="isKnown"
            type="checkbox"
            className={styles.checkbox}
            checked={!isKnownPartnerBirthPlace}
            onChange={() => setIsKnownPartnerBirthPlace((prev) => !prev)}
          />
          {translate(
            "/questionnaire/partnerProfile/partnerBirthPlace.checkbox"
          )}
        </label>
      )}
      <div className={styles.container}>
        <PlacePicker
          value={birthPlace}
          name="birthPlace"
          maxLength={1000}
          isDisabled={!isKnownPartnerBirthPlace}
          classNameInput={styles["full-address"]}
          onChange={handleChange}
        />

        {(!!birthPlace.length || !isKnownPartnerBirthPlace) && (
          <QuestionnaireGreenButton
            className={styles.button}
            onClick={handleNext}
          >
            {translate("next")}
          </QuestionnaireGreenButton>
        )}
      </div>
    </>
  );
}

export default BirthPlaceCustomAnswer;
