import { DatePicker } from "@/components/DateTimePicker";
import styles from "./styles.module.css";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { useState } from "react";
import { useTranslations } from "@/hooks/translations";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import QuestionnaireGreenButton from "../../../../ui/GreenButton";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import metricService from "@/services/metric/metricService";
import { ELocalesPlacement } from "@/locales";

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

function BirthdateCustomAnswer({
  affiliation = "self",
}: IBirthdateCustomAnswerProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  useLottie({
    preloadKey: ELottieKeys.darts,
  });
  useLottie({
    preloadKey: ELottieKeys.compass,
  });
  useLottie({
    preloadKey: ELottieKeys.cloudAndStars,
  });

  const selfBirthdate = useSelector(selectors.selectBirthdate);
  const questionnaire = useSelector(selectors.selectQuestionnaire);
  const birthdateFromStore =
    affiliation === "self" ? selfBirthdate : questionnaire.partnerBirthdate;

  const [birthdate, setBirthdate] = useState(birthdateFromStore);
  const [isDisabled, setIsDisabled] = useState(true);
  const handleValid = (_birthdate: string) => {
    if (affiliation === "self") {
      dispatch(actions.form.addDate(birthdate));
    }
    setBirthdate(_birthdate);
    setIsDisabled(_birthdate === "");
  };

  const getAge = () => {
    const today = new Date();
    const birthDate = new Date(birthdate);
    let age = today?.getFullYear() - birthDate?.getFullYear();
    const m = today?.getMonth() - birthDate?.getMonth();
    if (m < 0 || (m === 0 && today?.getDate() < birthDate?.getDate())) {
      age--;
    }
    return age;
  };

  const handleNext = () => {
    if (affiliation === "self") {
      const age = getAge();
      metricService.userParams({
        age,
      });
      dispatch(actions.questionnaire.update({ birthdate }));
      navigate(routes.client.singleZodiacInfoV1());
    }
    if (affiliation === "partner") {
      dispatch(actions.questionnaire.update({ partnerBirthdate: birthdate }));
      navigate(routes.client.relationshipZodiacInfoV1());
    }
  };

  return (
    <div className={styles.container}>
      <DatePicker
        name="birthdate"
        value={birthdate}
        onValid={handleValid}
        onInvalid={() => setIsDisabled(true)}
        inputClassName="date-picker-input"
      />
      <QuestionnaireGreenButton
        className={styles.button}
        onClick={handleNext}
        disabled={isDisabled}
      >
        {translate("next")}
      </QuestionnaireGreenButton>
      <img
        className={styles.image}
        src={`/birthdate-image-${questionnaire.gender}.svg`}
        alt="Circles"
      />
    </div>
  );
}

export default BirthdateCustomAnswer;
