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

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

    const handleOfferClick = (offer: "pause_30" | "free_chat_30") => {
        if (isLoadingButton) return;
        setActiveOffer(offer);
    }

    const handleGetOfferClick = async () => {
        if (isLoadingButton) return;
        setIsLoadingButton(true);

        const response = await api.userSubscriptionAction({
            subscriptionId: cancellingSubscriptionId,
            action: activeOffer,
            token
        });
        if (response.status === "success") {
            navigate(routes.client.retainingFunnelPlanCancelled());
        }
    }

    const handleCancelClick = () => {
        if (isLoadingButton) return;
        if (retainingFunnel === ERetainingFunnel.Red) {
            navigate(routes.client.retainingFunnelChangeMind());
        }
        if (retainingFunnel === ERetainingFunnel.Green) {
            return navigate(routes.client.retainingFunnelCancellationOfSubscription());
        }
        if (retainingFunnel === ERetainingFunnel.Purple) {
            return navigate(routes.client.retainingFunnelStopFor30Days());
        }
    }

    return (
        <div className={styles.container}>
            <Title variant="h1" className={styles.title}>
                {translate("/second-chance.title")}
            </Title>
            <div className={styles.offers}>
                <Offer
                    title={translate("/second-chance.offers.1.title")}
                    description={translate("/second-chance.offers.1.description")}
                    oldPrice={translate("/second-chance.offers.1.old-price")}
                    newPrice={translate("/second-chance.offers.1.new-price")}
                    onClick={() => handleOfferClick("pause_30")}
                    active={activeOffer === "pause_30"}
                    image={<EYESVG className={styles.offerImageEYE} />}
                />
                <Offer
                    title={translate("/second-chance.offers.2.title")}
                    description={translate("/second-chance.offers.2.description")}
                    oldPrice={translate("/second-chance.offers.2.old-price")}
                    newPrice={translate("/second-chance.offers.2.new-price")}
                    onClick={() => handleOfferClick("free_chat_30")}
                    active={activeOffer === "free_chat_30"}
                    image={<img className={styles.offerImageVIP} src={images("vip_member.png")} alt="vip member" />}
                />
            </div>

            <div className={styles.buttonOfferContainer}>
                <BlurComponent className={styles.blur} isActiveBlur={true}>
                    <Button
                        className={styles.buttonOffer}
                        active={true}
                        onClick={handleGetOfferClick}
                    >
                        {isLoadingButton && <div className={styles.loaderContainer}>
                            <Loader color={LoaderColor.White} />
                        </div>}
                        {translate("/second-chance.get_offer")}
                    </Button>
                </BlurComponent>
            </div>
            <Button
                className={styles.buttonCancel}
                onClick={handleCancelClick}
            >
                {translate("/second-chance.cancel")}
            </Button>
        </div>
    )
}

export default SecondChancePage