import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { useEffect, useMemo, useState } from "react";
import GPTAnimationText from "@/components/ui/GPTAnimationText";
import { ELottieKeys } from "@/hooks/lottie/useLottie";
import { useLottie } from "@/hooks/lottie/useLottie";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import Button from "../../components/Button";
import routes from "@/routes";
import { useNavigate } from "react-router-dom";

const TOTAL_ANIMATION_TIME = 5000;

function Stay50Done() {
    const { translate } = useTranslations(ELocalesPlacement.RetainingFunnel);
    const navigate = useNavigate();
    const { animationData } = useLottie({
        loadKey: ELottieKeys.loaderCheckMark,
    });
    const [visibleButton, setVisibleButton] = useState(false);

    const descriptions = useMemo(() => {
        return [
            translate("/stay-50-done.descriptions.1"),
        ]
    }, [translate]);

    useEffect(() => {
        const timer = setTimeout(() => {
            setVisibleButton(true);
        }, TOTAL_ANIMATION_TIME);
        return () => clearTimeout(timer);
    }, []);

    const handleNext = () => {
        navigate(routes.client.home());
    }

    return (
        <div className={styles.container}>
            <div className={styles["lottie-animation-container"]}>
                {animationData &&
                    <DotLottieReact
                        className={`${styles["lottie-animation"]} ym-hide-content`}
                        data={animationData}
                        autoplay
                        // loop={true}
                        width={80}
                    />}
            </div>
            <Title variant="h1" className={styles.title}>
                {translate("/stay-50-done.title")}
            </Title>
            <GPTAnimationText
                points={descriptions}
                totalAnimationTime={TOTAL_ANIMATION_TIME}
            />
            {visibleButton &&
                <Button className={styles.button} active={true} onClick={handleNext}>
                    {translate("/stay-50-done.button")}
                </Button>
            }
        </div>
    )
}

export default Stay50Done