import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import Title from "@/components/Title";
import { useCallback, useEffect, useRef, useState } from "react";
import { sleep } from "@/services/date";
import { CircularProgressbar } from "react-circular-progressbar";
import routes from "@/routes";
import { usePreloadImages } from "@/hooks/preload/images";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";

const POINTS_COUNT = 13;
const TOTAL_ANIMATION_TIME = 24600;

function YourAnalysis() {
    const navigate = useNavigate();
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const [loadingProgress, setLoadingProgress] = useState(0);
    const listRef = useRef<Array<HTMLParagraphElement | null>>([]);

    const { gender, birthdate } = useSelector(selectors.selectQuestionnaire);
    const zodiacSign = getZodiacSignByDate(birthdate);
    usePreloadImages([
        `/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`
    ]);

    const [listHeight, setListHeight] = useState(0);

    useEffect(() => {
        let maxHeight = 0;
        listRef.current.forEach((item) => {
            if (item?.offsetHeight && item.offsetHeight > maxHeight) {
                maxHeight = item.offsetHeight;
            }
        });
        setListHeight(maxHeight);
    }, [listRef]);

    // const [currentPoint, setCurrentPoint] = useState(0);

    const handleNext = useCallback(() => {
        navigate(routes.client.compatibilityV4PalmsInformation());
    }, [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]);

    // const getPointsHeight = useCallback(() => {
    //     return listRef.current.slice(currentPoint, currentPoint + 4).reduce((acc, curr) => {
    //         return acc + (curr?.offsetHeight || 0) + 32;
    //     }, 0) - 32;
    // }, [currentPoint]);

    // useEffect(() => {
    //     (async () => {
    //         await sleep(TOTAL_ANIMATION_TIME / (POINTS_COUNT - 1));
    //         setCurrentPoint((value) => {
    //             if (value >= POINTS_COUNT - 4) {
    //                 return value;
    //             }
    //             return value + 1;
    //         });
    //     })()
    // }, [currentPoint])

    return (
        <div className={styles.container}>
            <div className={styles["progress-container"]}>
                <CircularProgressbar
                    // counterClockwise={true}
                    className={styles["progress-bar"]}
                    styles={{
                        path: { stroke: "#1A6697", strokeWidth: "8px" },
                        trail: { stroke: "#fff", strokeWidth: "8px" },
                        text: { fill: "#1A6697", fontSize: "14px" },
                    }}
                    maxValue={100}
                    minValue={0}
                    value={loadingProgress}
                    text={`${loadingProgress}%`}
                    strokeWidth={8}
                />
            </div>
            <Title variant="h2" className={styles.title}>
                {translate("/your-analysis.title")}
            </Title>
            <div className={styles.list} style={{
                // height: `${getPointsHeight()}px`
                height: `${listHeight}px`
            }}>
                {Array.from(Array(POINTS_COUNT).keys()).map((index) => (
                    <p
                        key={index}
                        className={styles.item}
                        ref={(el) => listRef.current[index] = el}
                        style={{
                            // marginTop: (() => {
                            //     if (index < currentPoint) {
                            //         return `${-(listRef.current[index]?.offsetHeight || 0) - 32}px`
                            //     }
                            //     return "0px"
                            // })(),,
                            animationDuration: `${TOTAL_ANIMATION_TIME / (POINTS_COUNT)}ms`,
                            animationDelay: `${index * (TOTAL_ANIMATION_TIME / (POINTS_COUNT))}ms`
                        }}
                    >
                        {translate(`/your-analysis.point${index + 1}`)}
                        <span
                            className={styles.line}
                            style={{
                                animationDuration: `${TOTAL_ANIMATION_TIME / (POINTS_COUNT)}ms`
                            }}
                        />
                    </p>
                ))}
            </div>
        </div>
    )
}

export default YourAnalysis