import { useSelector } from "react-redux";
import styles from "./styles.module.scss";
import { selectors } from "@/store";
import { useEffect, useMemo, useRef, useState } from "react";
import { IPalmistryLine } from "@/api/resources/Palmistry";
import Title from "@/components/Title";
import { IPalmistryFingerLocal } from "@/store/palmistry";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import ScannedPhotoElement from "@/components/palmistry/scanned-photo/scanned-photo";
import Header from "../../components/Header";

const drawElementChangeDelay = 1500;
const startDelay = 500;

function ScannedPhoto() {
  const navigate = useNavigate();
  const photo = useSelector(selectors.selectPalmistryPhoto);
  const fingers = useSelector(selectors.selectPalmistryFingers);
  const lines = useSelector(selectors.selectPalmistryLines);

  const changeTitleTimeOut = useRef<NodeJS.Timeout>();

  const [currentElementIndex, setCurrentElementIndex] = useState(0);
  const [title, setTitle] = useState("");
  const [shouldDisplayPalmLines, setShouldDisplayPalmLines] = useState(false);
  const [smallPhotoState, setSmallPhotoState] = useState(false);

  const drawElements = useMemo(() => [...fingers, ...lines], [fingers, lines]);

  useEffect(() => {
    if (!drawElements[currentElementIndex]) return;
    changeTitleTimeOut.current = setTimeout(() => {
      const title =
        (drawElements[currentElementIndex] as IPalmistryFingerLocal)
          .fingerName || drawElements[currentElementIndex].name;
      setTitle(title);
      if (currentElementIndex < drawElements.length - 1) {
        setCurrentElementIndex((prevState) => prevState + 1);
      }
    }, drawElementChangeDelay);

    return () => {
      if (changeTitleTimeOut.current) {
        clearTimeout(changeTitleTimeOut.current);
      }
    };
  }, [currentElementIndex, drawElements]);

  useEffect(() => {
    setShouldDisplayPalmLines(
      lines.includes(drawElements[currentElementIndex] as IPalmistryLine)
    );
  }, [currentElementIndex, drawElements, lines]);

  useEffect(() => {
    if (currentElementIndex < drawElements.length - 1) return;
    const timer = setTimeout(() => {
      setSmallPhotoState(true);
    }, drawElementChangeDelay * 2);
    const goNextTimer = setTimeout(
      () => navigate(routes.client.emailEnterV1()),
      drawElementChangeDelay * drawElements.length + 8000
    );

    return () => {
      if (timer) {
        clearTimeout(timer);
      }
      if (goNextTimer) {
        clearTimeout(goNextTimer);
      }
    };
  }, [currentElementIndex, drawElements.length, navigate]);

  useEffect(() => {
    if (currentElementIndex < drawElements.length) return;
    const timer = setTimeout(() => {
      // navigate(routes.client.palmistryV1Email());
    }, drawElementChangeDelay + 1000);
    return () => clearTimeout(timer);
  }, [currentElementIndex, drawElements.length, navigate]);

  return (
    <section className={`${styles.page} palmistry-container_type_scan-photo`}>
      <Header className={styles.header} />
      <Title variant="h2" className={styles.title}>
        {title}
      </Title>
      <ScannedPhotoElement
        photo={photo}
        small={smallPhotoState}
        drawElementChangeDelay={drawElementChangeDelay}
        startDelay={startDelay}
        displayLines={shouldDisplayPalmLines}
        lines={lines}
        fingers={fingers}
        drawElements={drawElements}
      />
      <h2
        className="palmistry-container__waiting-title"
        style={{
          animationDelay: `${
            drawElementChangeDelay * drawElements.length + 2500
          }ms`,
        }}
      >
        We are putting together a comprehensive Palmistry Reading just for you!
      </h2>

      <h3
        className="palmistry-container__waiting-description"
        style={{
          animationDelay: `${
            drawElementChangeDelay * drawElements.length + 3000
          }ms`,
        }}
      >
        Wow, looks like there is a lot we can tell about your ambitious and
        strong self-confident future.
      </h3>
    </section>
  );
}

export default ScannedPhoto;
