import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { CircularProgressbar } from "react-circular-progressbar";
import { useCallback, useEffect, useState } from "react";
import { sleep } from "@/services/date";
import { images } from "../../data";

function Processing() {
  const navigate = useNavigate();
  const { username } = useSelector(selectors.selectUser);
  const [loadingProgress, setLoadingProgress] = useState(0);

  const handleNext = useCallback(() => {
    navigate(routes.client.chatsCategories());
  }, [navigate]);

  useEffect(() => {
    (async () => {
      if (loadingProgress >= 100) {
        await sleep(2000);
        return handleNext();
      }
      if (loadingProgress === 51) {
        await sleep(1500);
      } else if (loadingProgress === 73) {
        await sleep(1500);
      } else {
        await sleep(200);
      }
      setLoadingProgress((value) => value + 1);
    })();
  }, [handleNext, loadingProgress]);

  return (
    <section className={styles.container}>
      <Title className={styles.title} variant="h2">
        <span>{username}, you are all set,</span> now we are creating your
        profile
      </Title>

      <svg className={styles["svg-defs"]}>
        <defs>
          <linearGradient
            id="paint0_linear"
            x1="45"
            y2="-9.5"
            x2="53.1842"
            y1="40"
            gradientUnits="userSpaceOnUse"
          >
            <stop offset="4.19%" stopColor="#3639A2"></stop>
            <stop offset="49.79%" stopColor="#6D4BCD"></stop>
            <stop offset="81.72%" stopColor="#9D5BE9"></stop>
          </linearGradient>
        </defs>
      </svg>
      <div className={styles["progress-container"]}>
        <div className={styles["background-gradient"]} />
        <CircularProgressbar
          // counterClockwise={true}
          className={styles["progress-bar"]}
          styles={{
            path: { stroke: "url(#paint0_linear)" },
            trail: { stroke: "#D2D1F9" },
            text: { fill: "#fff", fontSize: "12px" },
          }}
          maxValue={100}
          minValue={0}
          value={loadingProgress}
          text={`${loadingProgress}%`}
          strokeWidth={8}
        />
      </div>

      <ul className={styles.list}>
        <li className={styles.item}>
          <div className={styles.circle}>
            <img src={images("done.webp")} alt="done" width="22" height="16" />
          </div>
          Analyzing your answers...
        </li>
        <li className={styles.item}>
          <div className={styles.circle}>
            <img src={images("done.webp")} alt="done" width="22" height="16" />
          </div>
          Fetching a list of available psychics...
        </li>
        <li className={styles.item}>
          <div className={styles.circle}>
            <img src={images("done.webp")} alt="done" width="22" height="16" />
          </div>
          Matching you to the best psychics...
        </li>
        <li className={styles.item}>
          <div className={styles.circle}>
            <img src={images("done.webp")} alt="done" width="22" height="16" />
          </div>
          Personalizing your experience...
        </li>
      </ul>
    </section>
  );
}

export default Processing;