import Title from "@/components/Title";
import styles from "./styles.module.css";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { getRandomArbitrary } from "@/services/random-value";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { useEffect, useMemo, useRef, useState } from "react";
import { CircularProgressbar } from "react-circular-progressbar";
import { useDynamicSize } from "@/hooks/useDynamicSize";
import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
import Header from "../../components/Header";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { usePreloadImages } from "@/hooks/preload/images";
import { useTouchAction } from "@/hooks/touchAction/useTouchAction";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function LoadingInRelationshipPage() {
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const { birthdate } = useSelector(selectors.selectQuestionnaire);
  const gender = useSelector(selectors.selectQuestionnaire).gender || "default";

  const [loadingProgress, setLoadingProgress] = useState(100);
  const intervalRef = useRef<NodeJS.Timeout>();
  const randomValue = useMemo(() => {
    return [getRandomArbitrary(300, 995), getRandomArbitrary(3, 995)];
  }, []);
  const { width: pageWidth, elementRef: pageRef } = useDynamicSize({});
  usePreloadImages([
    "/works-traits-unhappy.webp",
    "/works-traits-happy.webp",
    "/works-traits-never_been.webp",
    "/works-for-us-very-unhappy.webp",
    "/works-for-us-unhappy.webp",
    "/works-for-us-happy.webp",
    "/thumbs_up.webp",
    "/thumbs_more_up.webp",
    "/thumbs_middle.webp",
    "/thumbs_more_down.webp",
    "/thumbs_down.webp",
    "/almost-there.webp",
    "/man.webp",
    "/woman.webp",
    "/almost-there.webp",
    "/unamused.webp",
    "/anxious_face_with_sweat.webp",
    "/red-heart.webp",
    "/brain.webp",
    "/paperclip.webp",
    "/questionV1.webp",
    "/input_numbers.webp",
    "/sunset.webp",
    "/rised_hand.webp",
    "/crystal_ball.webp",
    "/technologist.webp",
  ]);
  useTouchAction("none");

  useLottie({
    preloadKey: ELottieKeys.key,
  });
  useLottie({
    preloadKey: ELottieKeys.umbrella,
  });

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      if (loadingProgress <= 0) {
        return handleNext();
        return;
      }
      setLoadingProgress((prev) => prev - 1);
    }, 120);
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [loadingProgress]);

  const handleNext = () => {
    navigate(routes.client.problemsV1());
  };

  return (
    <section className={`${styles.page} page`} ref={pageRef}>
      <BackgroundTopBlob
        width={pageWidth}
        height={456}
        className={styles["background-top-blob"]}
      ></BackgroundTopBlob>
      <Header isBackButtonVisible={false} />
      <div className={styles["loader"]}>
        <CircularProgressbar
          counterClockwise={true}
          styles={{
            path: { stroke: "#0F1323" },
            trail: { stroke: "#fff" },
            text: { fill: "#0F1323", fontSize: "16px" },
          }}
          maxValue={100}
          minValue={0}
          value={loadingProgress}
          text={`${100 - loadingProgress}%`}
          strokeWidth={8}
        />
      </div>
      <p className={styles["loading-text"]}>
        {translate(`/loading-in-relationship.connecting`)}
      </p>
      <div>
        <Title variant="h1" className={styles.title}>
          {translate(`/loading-in-relationship.description`, {
            peopleCount: `${randomValue[0]},${randomValue[1]}`.padStart(3, "0"),
            gender: translate(gender?.toLowerCase()),
            zodiacSign: translate(
              `zodiac_signs.${getZodiacSignByDate(birthdate)?.toLowerCase()}`
            ),
          })}
        </Title>
        <p className={styles.text}>
          {translate(`/loading-in-relationship.date`)}
        </p>
      </div>
    </section>
  );
}

export default LoadingInRelationshipPage;
