import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import styles from "./styles.module.scss";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import Title from "@/components/Title";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import Offer from "../../components/Offer";
import Button from "../../components/Button";
import Toast from "@/components/pages/ABDesign/v1/components/Toast";
import { useEffect, useState } from "react";
import TopSellingSVG from "../../images/SVG/TopSelling";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import Loader, { LoaderColor } from "@/components/Loader";
import { useSelector } from "react-redux";
import { useApi } from "@/api";
import { selectors } from "@/store";

function CancellationOfSubscription() {
    const navigate = useNavigate();
    const { translate } = useTranslations(ELocalesPlacement.RetainingFunnel);
    const api = useApi();
    const token = useSelector(selectors.selectToken);
    const cancellingSubscriptionId = useSelector(selectors.selectCancellingSubscriptionId);
    const { animationData: animationDataCheckMark } = useLottie({
        loadKey: ELottieKeys.loaderCheckMark2,
    });
    const { animationData: animationDataConfetti } = useLottie({
        loadKey: ELottieKeys.confetti,
    });
    const [isToastVisible, setIsToastVisible] = useState(false);
    const [isConfettiVisible, setIsConfettiVisible] = useState(false);
    const [isLoadingOfferButton, setIsLoadingOfferButton] = useState<boolean>(false);
    const [isLoadingCancelButton, setIsLoadingCancelButton] = useState<boolean>(false);

    useEffect(() => {
        const timer = setTimeout(() => {
            setIsConfettiVisible(true);
        }, 2000);
        return () => clearTimeout(timer);
    }, []);

    const handleOfferButtonClick = async () => {
        if (isLoadingOfferButton || isLoadingCancelButton) return;
        setIsLoadingOfferButton(true);
        const response = await api.userSubscriptionAction({
            subscriptionId: cancellingSubscriptionId,
            action: "pause_60",
            token
        });
        if (response.status === "success") {
            navigate(routes.client.retainingFunnelSubscriptionStopped());
        }
    }

    const handleCancelClick = async () => {
        if (isToastVisible || isLoadingOfferButton || isLoadingCancelButton) return;
        setIsLoadingCancelButton(true);
        const response = await api.userSubscriptionAction({
            subscriptionId: cancellingSubscriptionId,
            action: "cancel",
            token
        });
        if (response.status === "success") {
            setIsToastVisible(true);
            const timer = setTimeout(() => {
                navigate(routes.client.profile());
            }, 7000);
            return () => clearTimeout(timer);
        }
    }

    return (
        <div className={styles.container}>
            <div className={styles["lottie-animation-container-check-mark"]}>
                {animationDataCheckMark &&
                    <DotLottieReact
                        className={`${styles["lottie-animation-check-mark"]} ym-hide-content`}
                        data={animationDataCheckMark}
                        autoplay
                        // loop={true}
                        width={80}
                    />}
            </div>
            {isConfettiVisible &&
                <div className={styles["lottie-animation-container-confetti"]}>
                    {animationDataConfetti &&
                        <DotLottieReact
                            className={`${styles["lottie-animation-confetti"]} ym-hide-content`}
                            data={animationDataConfetti}
                            autoplay
                            // loop={true}
                            width={80}
                        />}
                </div>
            }
            <Title variant="h1" className={styles.title}>
                {translate("/cancellation-of-subscription.title")}
            </Title>
            <p className={styles.description}>
                {translate("/cancellation-of-subscription.description")}
            </p>
            <Offer
                className={styles.offer}
                classNameTitle={styles.titleOffer}
                title={translate("/cancellation-of-subscription.offer.title")}
                oldPrice={translate("/cancellation-of-subscription.offer.old-price")}
                newPrice={translate("/cancellation-of-subscription.offer.new-price")}
                image={<TopSellingSVG className={styles.topSellingImage} />}
                active={true}
            />
            <Button
                className={styles.buttonOffer}
                active={true}
                onClick={handleOfferButtonClick}
            >
                {isLoadingOfferButton && <div className={styles.loaderContainer}>
                    <Loader color={LoaderColor.White} />
                </div>}
                {translate("/cancellation-of-subscription.offer_button")}
            </Button>
            <Button
                className={styles.buttonCancel}
                onClick={handleCancelClick}
            >
                {isLoadingCancelButton && <div className={styles.loaderContainer}>
                    <Loader color={LoaderColor.Black} />
                </div>}
                {translate("/cancellation-of-subscription.cancel_button")}
            </Button>
            {isToastVisible && <Toast
                classNameContainer={styles.toast}
                variant="success"
            >
                Ваша подписка будет аннулирована!
            </Toast>}
        </div>
    )
}

export default CancellationOfSubscription