import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { useMemo, useState } from "react";
import Button from "../../components/Button";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { ERetainingFunnel } from "@/store/retainingFunnel";
import { usePreloadImages } from "@/hooks/preload/images";
import { images } from "../../data";

interface IAnswer {
    id: number;
    title: string;
}

function ChangeMindPage() {
    const navigate = useNavigate();
    const { translate } = useTranslations(ELocalesPlacement.RetainingFunnel);
    usePreloadImages([
        images("vip_member.png")
    ])
    const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
    const [activeAnswer, setActiveAnswer] = useState<IAnswer | null>(null);

    const handleNext = (answer: IAnswer) => {
        setActiveAnswer(answer);
        const timer = setTimeout(() => {
            if (retainingFunnel === ERetainingFunnel.Red) {
                navigate(routes.client.retainingFunnelStopFor30Days());
            }
            if (retainingFunnel === ERetainingFunnel.Green) {
                navigate(routes.client.retainingFunnelSecondChance());
            }
            if (retainingFunnel === ERetainingFunnel.Purple) {
                navigate(routes.client.retainingFunnelSecondChance());
            }
        }, 1000);
        return () => clearTimeout(timer);
    }

    const answers: IAnswer[] = useMemo(() => [
        {
            id: 1,
            title: translate("/change-mind.answers.more_chat_time"),
        },
        {
            id: 2,
            title: translate("/change-mind.answers.more_personal_reports"),
        },
        {
            id: 3,
            title: translate("/change-mind.answers.individual_plan"),
        },
        {
            id: 4,
            title: translate("/change-mind.answers.other"),
        }
    ], [translate]);

    return (
        <div>
            <Title variant="h1" className={styles.title}>
                {translate("/change-mind.title")}
            </Title>

            <div className={styles.answers}>
                {answers.map((answer) => (
                    <Button
                        key={answer.id}
                        className={styles.answer}
                        active={activeAnswer?.id === answer.id}
                        onClick={() => handleNext(answer)}
                    >
                        {answer.title}
                    </Button>
                ))}
            </div>
        </div>
    )
}

export default ChangeMindPage