import Title from "@/components/Title";
import styles from "./styles.module.css";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import Header from "../../components/Header";
import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
import { useDynamicSize } from "@/hooks/useDynamicSize";
import QuestionnaireGreenButton from "../../ui/GreenButton";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { useEffect } from "react";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function EmailConfirmPage() {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const navigate = useNavigate();
  const { width: pageWidth, elementRef: pageRef } = useDynamicSize({});

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

  const handleNext = () => {
    // navigate(routes.client.onboardingV1());
    return navigate(routes.client.tryAppV1());
  };

  useEffect(() => {
    document.body.classList.add(styles["body-email-confirm"]);
    return () => {
      document.body.classList.remove(styles["body-email-confirm"]);
    };
  }, []);

  return (
    <section className={`${styles.page} page`} ref={pageRef}>
      <BackgroundTopBlob
        width={pageWidth}
        className={styles["background-top-blob"]}
        height={180}
      />
      <Header className={styles.header} />
      <div className={styles["top-section"]}>
        <div className={`${styles["lottie-animation"]} ym-hide-content`}>
          {animationData && (
            <DotLottieReact data={animationData} autoplay loop={false} />
          )}
        </div>
        <Title className={styles.title}>
          {translate("/email-confirm.title", {
            gradient: (
              <span className={styles.gradient}>
                {translate("/email-confirm.title_gradient")}
              </span>
            ),
          })}
        </Title>
        <p className={styles.description}>{translate("/email-confirm.description1")}</p>
        <QuestionnaireGreenButton
          className={styles.button}
          onClick={handleNext}
        >
          {translate("continue")}
        </QuestionnaireGreenButton>
      </div>
      <div className={styles["bottom-section"]}>
        <p className={styles["text-link"]} onClick={handleNext}>
          {translate("/email-confirm.description2")}
        </p>
      </div>
    </section>
  );
}

export default EmailConfirmPage;
