import { useEffect, useRef, useState } from "react";
import styles from "./styles.module.scss";
import { Fade, Grow } from "@mui/material";
import loadable from "@loadable/component";
import bgImg from "@assets/firstPay/bg.webp";
import coinImg from "@assets/firstPay/coin.webp"
import { useNavigate } from "react-router";
import { ROUTE_PATH } from "@constants/routes";
import CountDown from "@components/CountDown/CountDown";
import SvgIcon from "@components/SvgIcon";
import { useSelector } from "react-redux";
import { getFirstPayGift } from "@features/paySlice";
import usePaymentActions from "@hooks/usePaymentActions";

const Modal = loadable(() => import('@mui/material/Modal'));
const i18n = global.i18n;
const WFirstPay = () => {
    const [isShow, setIsShow] = useState(false);
    const { getFirstPayGiftInfo } = usePaymentActions();
    const firstPayGift = getFirstPayGiftInfo();
    const total_bonus = firstPayGift.total_bonus;
    const leftTimes = firstPayGift.time_left;
    
    const navigate = useNavigate();
    const show = () => {
        setIsShow(true);
    }
    const hide = () => {
        setIsShow(false);
    }
    const onClose = () => {
        hide();
        global.openNextPopup();
    }
    const onDeposit = () => {
        hide();
        navigate(ROUTE_PATH.FIRSTDEPOSIT);
        // adjust 点击首充礼包按钮
        global.enterRechargeType = 1;
        global.tracker.trackEvent("click_first_pay");
        global.tracker.trackEvent("click_first_pay_count");
    }


    useEffect(() => {
        const firstPay = {
            show,
            hide
        };
        global.firstPay = firstPay;
    }, [])

    const renderFirstDeposit = () => {
        return (
            <div className={styles.container}>
                <img className={styles.bg_img} src={bgImg} />
                <SvgIcon className={styles.btn_close} herf={"icon_Close"} onClick={onClose} />
                <div className={styles.title_lbl}>Fist Deposit</div>
                <div className={styles.amount_lbl}>Bouns +{total_bonus}%</div>
                <div className={styles.des_box}>
                    <div className={styles.des_item}>
                        <img className={styles.icon} src={coinImg} alt={i18n.t("firstDeposit.tis_1")} />
                        <p>{i18n.t("firstDeposit.tis_1")}</p>
                    </div>

                    <div className={styles.des_item}>
                        <img className={styles.icon} src={coinImg} alt={i18n.t("firstDeposit.tis_2")} />
                        <p>{i18n.t("firstDeposit.tis_2")}</p>
                    </div>

                    <div className={styles.des_item}>
                        <img className={styles.icon} src={coinImg} alt={i18n.t("firstDeposit.tis_3")} />
                        <p>{i18n.t("firstDeposit.tis_3")}</p>
                    </div>
                </div>
                <CountDown times={leftTimes} onEnd={onClose}></CountDown>
                <button className="button-yellow2" onClick={onDeposit}>Deposit</button>
            </div>
        )
    }
    return (
        <Modal open={isShow} closeAfterTransition>
            <Fade in={isShow} timeout={500}>
                <div className="popup-container">
                    <Grow in={isShow} timeout={500}>
                        <div className={styles.container}>
                            {renderFirstDeposit()}
                        </div>
                    </Grow></div>
            </Fade>
        </Modal>
    )
}
export default WFirstPay;
