import Title from "@/components/Title";
import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import Header from "../../components/Header";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { usePreloadImages } from "@/hooks/preload/images";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function AlmostTherePage() {
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.V1);
  usePreloadImages([
    "/raising_hands.webp",
    "/fork_and_knife_with_plate.webp",
    "/mountain.webp",
    "/cityscape_at_dusk.webp",
    "/national_park.webp",
    "/parachute.webp",
    "/microscope.webp",
    "/paperclip.webp",
    "/blue_book.webp",
    "/party_popper.webp",
  ]);

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

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

  const handleNext = () => {
    navigate(
      `${routes.client.questionnaireV1()}/relationship_pattern/priority`
    );
  };

  return (
    <section className={`${styles.page} page`}>
      <div className={styles["background_wrap"]} />
      <Header
        isBackButtonVisible={false}
        classNameTitle={styles["header-title"]}
      />
      <div className={`${styles["lottie-animation"]} ym-hide-content`}>
        {animationData && (
          <DotLottieReact data={animationData} autoplay loop={false} />
        )}
      </div>
      <div>
        <Title variant="h1" className={styles.title}>
          {translate("/almost-there.title", {
            gradient: (
              <span className={styles.gradient}>
                {translate("/almost-there.title_gradient")}
              </span>
            ),
          })}
        </Title>
        <p className={styles.text}>{translate("/almost-there.description")}</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 AlmostTherePage;
