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, useMemo, useState } from "react";
import { sleep } from "@/services/date";
import { CircularProgressbar } from "react-circular-progressbar";
import routes from "@/routes";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { usePreloadImages } from "@/hooks/preload/images";
import GPTAnimationText from "@/components/ui/GPTAnimationText";

function PartnerAnalysis() {
    const navigate = useNavigate();
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const [loadingProgress, setLoadingProgress] = useState(0);

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

    const points = useMemo(() => {
        return [
            translate("/partner-analysis.point1"),
            translate("/partner-analysis.point2"),
            translate("/partner-analysis.point3"),
            translate("/partner-analysis.point4"),
        ]
    }, [translate]);

    const handleNext = useCallback(() => {
        navigate(routes.client.compatibilityV4PalmsInformationPartner());
    }, [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 (
        <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("/partner-analysis.title")}
            </Title>
            <GPTAnimationText
                points={points}
                totalAnimationTime={24600}
            />
        </div>
    )
}

export default PartnerAnalysis