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 { ERetainingFunnel } from "@/store/retainingFunnel";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import { usePreloadImages } from "@/hooks/preload/images";
import { images } from "../../data";

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

function WhatReasonPage() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { translate } = useTranslations(ELocalesPlacement.RetainingFunnel);
    usePreloadImages([
        images("vip_member.png")
    ])
    const [activeAnswer, setActiveAnswer] = useState<IAnswer | null>(null);

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

    const answers: IAnswer[] = useMemo(() => [
        {
            id: 1,
            title: translate("/what-reason.answers.no_promised_result"),
            funnel: ERetainingFunnel.Red
        },
        {
            id: 2,
            title: translate("/what-reason.answers.too_expensive"),
            funnel: ERetainingFunnel.Red
        },
        {
            id: 3,
            title: translate("/what-reason.answers.high_auto_payment"),
            funnel: ERetainingFunnel.Red
        },
        {
            id: 4,
            title: translate("/what-reason.answers.unexpected_fee"),
            funnel: ERetainingFunnel.Red
        },
        {
            id: 5,
            title: translate("/what-reason.answers.want_pause"),
            funnel: ERetainingFunnel.Green
        },
        {
            id: 6,
            title: translate("/what-reason.answers.service_not_as_expected"),
            funnel: ERetainingFunnel.Red
        },
        {
            id: 7,
            title: translate("/what-reason.answers.found_alternative"),
            funnel: ERetainingFunnel.Red
        },
        {
            id: 8,
            title: translate("/what-reason.answers.dislike_app"),
            funnel: ERetainingFunnel.Purple
        },
        {
            id: 9,
            title: translate("/what-reason.answers.hard_to_navigate"),
            funnel: ERetainingFunnel.Purple
        },
        {
            id: 10,
            title: translate("/what-reason.answers.other"),
            funnel: ERetainingFunnel.Purple
        }
    ], [translate]);

    return (
        <div>
            <Title variant="h1" className={styles.title}>
                {translate("/what-reason.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 WhatReasonPage