import Title from "@/components/Title";
import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import { useNavigate, useSearchParams } from "react-router-dom";
import routes from "@/routes";
import { useDynamicSize } from "@/hooks/useDynamicSize";
import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
import Header from "../../components/Header";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { useSession } from "@/hooks/session/useSession";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { ESourceAuthorization } from "@/api/resources/User";

function NoBirthtimePage() {
  const { updateSession } = useSession();
  const [searchParams] = useSearchParams();
  const affiliation = searchParams.get("affiliation") || "self";
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const { width: pageWidth, elementRef: pageRef } = useDynamicSize({});
  const questionnaire = useSelector(selectors.selectQuestionnaire);
  const birthdate =
    affiliation === "self"
      ? questionnaire.birthdate
      : questionnaire.partnerBirthdate;

  const { animationData } = useLottie({
    loadKey: ELottieKeys.hourglass,
  });

  const handleNext = async () => {
    if (affiliation === "partner") {
      await updateSession(
        {
          partner: {
            birthdate: `${birthdate} 00:00`,
          },
        },
        ESourceAuthorization["aura.main.new"]
      );
      navigate(
        `${routes.client.questionnaireV1()}/partnerProfile/partnerBirthPlace`
      );
    }
    if (affiliation === "self") {
      await updateSession(
        {
          profile: {
            birthdate: `${birthdate} 00:00`,
          },
        },
        ESourceAuthorization["aura.main.new"]
      );
      navigate(`${routes.client.questionnaireV1()}/profile/birthPlace`);
    }
  };

  const handleBack = () => {
    navigate(-1);
  };

  return (
    <section className={`${styles.page} page`} ref={pageRef}>
      <Header classNameTitle={styles["header-title"]} />
      <BackgroundTopBlob
        width={pageWidth}
        height={382}
        className={styles["background-top-blob"]}
      />
      <div className={styles.ellipse}>
        {animationData && (
          <DotLottieReact
            className={`${styles["lottie-animation"]} ym-hide-content`}
            data={animationData}
            autoplay
            loop={false}
          />
        )}
      </div>
      <div>
        <Title variant="h1" className={styles.title}>
          {translate("/no-time.title", {
            exactBirthTime:
              affiliation === "partner"
                ? translate("/no-time.title_partner")
                : translate("/no-time.title_self"),
          })}
        </Title>
        <p className={styles.text}>
          {translate("/no-time.description", {
            settings:
              affiliation === "partner"
                ? translate("/no-time.description_partner")
                : translate("/no-time.description_self"),
          })}
        </p>
      </div>
      <div className={styles["buttons-container"]}>
        <MainButton
          className={`${styles.button} ${styles["back-button"]}`}
          onClick={handleBack}
        >
          {translate("back")}
        </MainButton>
        <MainButton
          className={`${styles.button} ${styles["next-button"]}`}
          onClick={handleNext}
        >
          {translate("next")}
        </MainButton>
      </div>
    </section>
  );
}

export default NoBirthtimePage;
