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 routes from "@/routes";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { ERetainingFunnel } from "@/store/retainingFunnel";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import Loader, { LoaderColor } from "@/components/Loader";
import { useState } from "react";
import { useApi } from "@/api";

function StopFor30DaysPage() {
    const { translate } = useTranslations(ELocalesPlacement.RetainingFunnel);
    const navigate = useNavigate();
    const api = useApi();
    const token = useSelector(selectors.selectToken);
    const cancellingSubscriptionId = useSelector(selectors.selectCancellingSubscriptionId);
    useLottie({
        preloadKey: ELottieKeys.loaderCheckMark2,
    });
    useLottie({
        preloadKey: ELottieKeys.confetti,
    });
    const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
    const [isLoadingButton, setIsLoadingButton] = useState<boolean>(false);

    const handleStopClick = async () => {
        if (isLoadingButton) return;
        setIsLoadingButton(true);
        const response = await api.userSubscriptionAction({
            subscriptionId: cancellingSubscriptionId,
            action: "pause_30",
            token
        });
        if (response.status === "success") {
            navigate(routes.client.retainingFunnelSubscriptionStopped());
        }
    }

    const handleCancelClick = () => {
        if (isLoadingButton) return;
        if (retainingFunnel === ERetainingFunnel.Green) {
            return navigate(routes.client.retainingFunnelChangeMind());
        }
        navigate(routes.client.retainingFunnelCancellationOfSubscription());
    }
    return (
        <div>
            <Title variant="h1" className={styles.title}>
                {translate("/stop-for-30-days.title")}
            </Title>

            <div className={styles.buttonsContainer}>
                <Button
                    className={styles.button}
                    active={true}
                    onClick={handleStopClick}
                >
                    {isLoadingButton && <div className={styles.loaderContainer}>
                        <Loader color={LoaderColor.White} />
                    </div>}
                    {translate("/stop-for-30-days.stop")}
                </Button>
                <Button
                    className={styles.buttonCancel}
                    onClick={handleCancelClick}
                >
                    {translate("/stop-for-30-days.cancel")}
                </Button>
            </div>
        </div>
    )
}

export default StopFor30DaysPage