import LazyImage from '@components/LazyImage';
import styles from './styles.module.scss';
import Spring from "@components/Spring";
import moneyImg from "@assets/money.webp";
import lockImg from "@assets/icon_wallet_lock.png";
import SvgIcon from '@components/SvgIcon';
import WWithdrawalInfo from '@widgets/WWithdrawalInfo';
import { getFreeWithdraw, getFreeWithdrawClaimStatus, getFreeWithdrawMission, getUserInsureScore } from '@features/mainSlice';
import { REQ_STATUS } from '@api/config';
import { numFormatter, waitForSeconds } from '@utils/helpers';
import { connect, useDispatch, useSelector } from 'react-redux';
import { useEffect, useRef, useState } from 'react';
import { reqFreeWithdraw, reqFreeWithdrawClaim, reqWithdrawBaseInfo } from '@features/api';
import { toast } from 'react-toastify';
import Popup from '@components/Popup';
import { useNavigate } from 'react-router';
import { useThemeProvider } from '@contexts/themeContext';
import { useWithdrawMission } from '@contexts/withdrawMissionContext';
import { ROUTE_PATH } from '@constants/routes';
import useFreeWithdraw from '@hooks/useFreeWithdraw';
const i18n = global.i18n;

const WFreeWithdraw = () => {
    const { openRecommandGame } = useThemeProvider();
    const [gameTips, setGameTips] = useState(false);
    const [loading, setLoading] = useState(false);
    const claimStatus = useSelector(getFreeWithdrawClaimStatus);
    const info = useSelector(getFreeWithdraw);
    const infoRef = useRef(null);
    const dispatch = useDispatch();
    const navigate = useNavigate();

    const { setOpen: setWithdrawMission } = useWithdrawMission()
    const { claimFreeWithdraw } = useFreeWithdraw();

    useEffect(() => { 
        infoRef.current = info 
        // adjust 曝光大厅提现界面
        global.tracker.trackEvent("enter_withdraw_page");
        global.tracker.trackEvent("enter_withdraw_page_count");
    }, [info])

    const onClaim = async (action) => {
        if (infoRef.current.state === 1) {
            if (action === 0) {
                /// 绑定了手机 刷新状态
                setLoading(true);
                await dispatch(reqFreeWithdraw());
                await waitForSeconds(0.1);
                setLoading(false);
            }

            if (infoRef.current.state === 1) {
                /// 提醒用户去玩游戏
                setGameTips(true);
                return;
            }
        }

        if (infoRef.current.state === 2) {
            /// 提醒用户充值
            global.showWithdrawLimit();
            return;
        }

        // claimFreeWithdraw();
    }

    const openGame = () => {
        setGameTips(false);
        openRecommandGame && openRecommandGame();
    }

    const closeTips = () => {
        setGameTips(false);
    }

    return (
        <>
            <div className={styles.container}>
                <div className={styles.content}>
                    <div className={styles.tips_node}>
                        <LazyImage className={styles.tips_image} src={moneyImg} alt={"money"}></LazyImage>
                        {i18n.t("freebonus.tips")}
                    </div>

                    <div className={styles.amount_node}>
                        {i18n.t("freebonus.amount")}
                        <div className={styles.amount_num}>
                            <SvgIcon className={styles.amount_icon} herf={"icon_StarCoin"} />
                            {numFormatter(info.InsureScore)}
                        </div>
                    </div>

                    <div className={styles.form_box}>
                        <WWithdrawalInfo
                            onConfirm={onClaim}
                            loading={claimStatus === REQ_STATUS.LOADING || loading}
                            togType={0} />
                    </div>
                </div>
            </div>

            <Popup onClose={() => { }} open={gameTips} btnCloseType={0}>
                <div className={styles.game_tips}>
                    <img src={lockImg} className={styles.lock_img}></img>
                    <span className={styles.lbl_tips}>Need ${numFormatter(info.total - info.InsureScore)} More</span>
                    <span>Play to withdraw</span>

                    <button className={styles.btn_play} onClick={openGame}>Play</button>
                    <button className={styles.btn_later} onClick={closeTips}>Later</button>
                </div>
            </Popup>
        </>

    )
}
export default WFreeWithdraw;
