import Title from "@/components/Title"
import styles from "./styles.module.scss"
import { useTranslations } from "@/hooks/translations"
import { ELocalesPlacement } from "@/locales"
import Button from "../../components/Button";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useLottie } from "@/hooks/lottie/useLottie";
import { ELottieKeys } from "@/hooks/lottie/useLottie";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import Loader, { LoaderColor } from "@/components/Loader";
import { useApi } from "@/api";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import { ERetainingFunnel } from "@/store/retainingFunnel";

function CancelSubscriptionPage() {
    const dispatch = useDispatch();
    const api = useApi();
    const { translate } = useTranslations(ELocalesPlacement.RetainingFunnel);
    const navigate = useNavigate();
    useLottie({
        preloadKey: ELottieKeys.loaderCheckMark,
    });
    const cancellingSubscriptionId = useSelector(selectors.selectCancellingSubscriptionId);
    const token = useSelector(selectors.selectToken);

    const [activeButton, setActiveButton] = useState<"stay" | "cancel">();
    const [isLoadingButton, setIsLoadingButton] = useState<"stay" | "cancel">();

    const handleCancelButtonClick = () => {
        if (isLoadingButton) return;
        setActiveButton("cancel");
        const timer = setTimeout(() => {
            navigate(routes.client.retainingFunnelAppreciateChoice());
        }, 1000);
        return () => clearTimeout(timer);
    }

    const handleStayButtonClick = async () => {
        if (isLoadingButton) return;
        setActiveButton("stay");
        setIsLoadingButton("stay");

        const response = await api.userSubscriptionAction({
            subscriptionId: cancellingSubscriptionId,
            action: "discount_50",
            token
        });
        if (response.status === "success") {
            dispatch(actions.retainingFunnel.setFunnel(ERetainingFunnel.Stay50));
            navigate(routes.client.retainingFunnelStay50Done());
        }

        // const timer = setTimeout(() => {
        //     navigate(routes.client.retainingFunnelAppreciateChoice());
        // }, 1000);
        // return () => clearTimeout(timer);
    }

    return (
        <div>
            <Title variant="h1" className={styles.title}>
                {translate("/cancel-subscription.title")}
            </Title>
            <p className={styles.description}>
                {translate("/cancel-subscription.description", {
                    br: <br />
                })}
            </p>
            <div className={styles.buttons}>
                <Button className={styles.button} active={activeButton === "stay"} onClick={handleStayButtonClick}>
                    {isLoadingButton === "stay" && <div className={styles.loaderContainer}>
                        <Loader color={LoaderColor.White} />
                    </div>}
                    <span className={styles.buttonIcon}>🙋‍♀️</span>
                    {translate("/cancel-subscription.stay_button")}
                </Button>
                <Button className={styles.button} active={activeButton === "cancel"} onClick={handleCancelButtonClick}>
                    <span className={styles.buttonIcon}>🙅‍♀️</span>
                    {translate("/cancel-subscription.cancel_button")}
                </Button>
            </div>
        </div>
    )
}

export default CancelSubscriptionPage