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";

function LoadingInRelationshipPage() {
  const navigate = useNavigate();
  const { birthdate, gender } = useSelector(selectors.selectQuestionnaire);
  const [loadingProgress, setLoadingProgress] = useState(100);
  const intervalRef = useRef<NodeJS.Timeout>();
  const randomValue = useMemo(() => {
    return [getRandomArbitrary(300, 995), getRandomArbitrary(3, 995)];
  }, []);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      if (loadingProgress <= 0) {
        return handleNext();
      }
      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.problems());
  };

  return (
    <section className={`${styles.page} page`}>
      <div>
        <Title variant="h1" className={styles.title}>
          We've helped {randomValue[0]},{`${randomValue[1]}`.padStart(3, "0")}{" "}
          other {gender}s with their Sun in{" "}
          <span className={styles.yellow}>
            {getZodiacSignByDate(birthdate)}
          </span>{" "}
          to increase relationship satisfaction and we can't wait to help you
          too!
        </Title>
        <p className={styles.text}>*as of 24 February 2024</p>
      </div>
      {/* <LoadingCircle value={loadingProgress} /> */}
      <div style={{ width: 185, height: 185 }}>
        <CircularProgressbar
          counterClockwise={true}
          styles={{
            path: { stroke: "#fff" },
            trail: { stroke: "#6a3aa2" },
            text: { fill: "#fff", fontSize: "16px" },
          }}
          maxValue={100}
          minValue={0}
          value={loadingProgress}
          text={`${100 - loadingProgress}%`}
          strokeWidth={6}
        />
      </div>
      <p className={styles["loading-text"]}>Connecting database...</p>
    </section>
  );
}

export default LoadingInRelationshipPage;