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 { useEffect, useState } from "react";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { Button } from "../../ui/Button";
import { useStyle } from "@/routerComponents/Mike/v1/providers/StyleProvider/useStyle";
import { useGenderInfo } from "../../lib/getGenderInfo";
import ButtonBack from "../../components/ButtonBack";
import { Message } from "../../components/Message";
import { Card } from "../../ui/Card";

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

function BirthPlacePage({ affiliation = "self" }: IBirthPlaceProps) {
  const { translate } = useTranslations();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const questionnaire = useSelector(selectors.selectQuestionnaire);
  const birthPlace =
    affiliation === "self"
      ? questionnaire.birthPlace
      : questionnaire.partnerBirthPlace;

  const [isDisabled, setIsDisabled] = useState(() => !birthPlace);
  const { setStyle } = useStyle();
  const genderInfo = useGenderInfo();

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

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

  const handleNext = () => {
    if (affiliation === "partner") {
      return navigate(routes.client.relationshipAlmostThereV1());
    }
    // affiliation === "self"
    return navigate(routes.client.mikeV1() + routes.client.emailEnter());
  };

  useEffect(() => {
    setStyle({
      backgroundImage: "url(/bg-location-map.webp)",
      backgroundRepeat: "no-repeat",
      backgroundSize: "cover",
    });
  }, [setStyle]);

  return (
    <div className="page-mike page--dark">
      <ButtonBack theme="light" />
      <div className={styles.assistant}>
        <img src="/mike/avatar_2.png" />
        <Message>{translate("mike.birthplace.message")}</Message>
      </div>
      <Card className={styles.card}>
        <PlacePicker
          value={birthPlace}
          name="birthPlace"
          maxLength={1000}
          classNameInput={styles["full-address"]}
          onChange={handleChange}
        />

        <Button
          className={styles.button}
          style={{ background: genderInfo?.colorAssociation }}
          onClick={handleNext}
          disabled={isDisabled}
        >
          {translate("next")}
        </Button>
      </Card>
    </div>
  );
}

export default BirthPlacePage;
