import styles from './styles.module.scss';
import { useDispatch, useSelector } from "react-redux";
import { getConfig, getFirstPayGift, getFirstPayMulti, getPayConfigStatus, reqPayConfig } from "@features/paySlice";
import { useEffect, useState } from "react";
import { getPopFirst, getUserInfo } from "@features/mainSlice";
import { reqFirstPayConfig, reqFirstPayMulti, reqRechargeConfig } from "@features/api";
import { REQ_STATUS } from "@api/config";
import SmallLoading from "@components/SmallLoading";
import giftImg from "@assets/icon_gift.webp"
import LazyImage from '@components/LazyImage';
import SvgIcon from '@components/SvgIcon';
import WRecharge from '@widgets/WRecharge';
import { useNavigate } from 'react-router';
import { ROUTE_PATH } from '@constants/routes';
import { stringFormat } from '@utils/helpers';
import usePaymentActions from '@hooks/usePaymentActions';
import Footer from '@layout/Footer';
const i18n = global.i18n;
const WDeposit = ({ close }) => {
    const config = useSelector(getConfig);
    const navigate = useNavigate();
    const configStatus = useSelector(getPayConfigStatus);
    const [showGift, setShowGift] = useState(false);

    const { checkFirstPayGift } = usePaymentActions();
    const firstPayGift = useSelector(getFirstPayGift);
    const total_bonus = firstPayGift?.gift_info.total_bonus;

    const onOpenGift = () => {
        navigate(ROUTE_PATH.FIRSTDEPOSIT);
    }

    useEffect(() => {
        // adjust 曝光充值页面
        if (global.enterRechargeType == 0) {
            global.tracker.trackEvent("enter_recharge_page")
            global.tracker.trackEvent("enter_recharge_page_count");
        } else if (global.enterRechargeType == 1) {
            global.tracker.trackEvent("enter_recharge_page_first_pay");
            global.tracker.trackEvent("enter_recharge_page_first_pay_count");
        } else if (global.enterRechargeType == 2) {
            global.tracker.trackEvent("enter_recharge_page_vip_hint");
            global.tracker.trackEvent("enter_recharge_page_vip_hint_count");
        }
    }, []);

    useEffect(() => {
        if (checkFirstPayGift()) {
            setShowGift(true);
            global.clearPopupFlow();
            global.showFirstPay();
        } else {
            setShowGift(false);
        }
    }, [firstPayGift])

    const renderDeposit = () => {
        return (
            <div>
                {
                    showGift ? <div className={styles.first_gift} onClick={onOpenGift}>
                        <LazyImage className={styles.image} src={giftImg} alt={'gift'}></LazyImage>
                        <div className={styles.tips}>
                            {i18n.t("deposit.gift.tips1")}
                            <span className={styles.bold}>
                                {stringFormat(i18n.t("deposit.gift.tips2"), [total_bonus])}
                            </span>
                            <br />
                            {i18n.t("deposit.gift.tips3")}
                        </div>
                        <SvgIcon className={styles.icon} herf={"icon_Arrow2"}></SvgIcon>
                    </div> : <></>
                }

                <WRecharge goods={config} goodsName='chip' />
                <Footer />
            </div>
        )
    }
    return (
        <div className={`${styles.container} page-top`}>
            {
                configStatus === REQ_STATUS.LOADING ? (<SmallLoading></SmallLoading>) : renderDeposit()
            }
        </div>
    )
}
export default WDeposit;
