import React, { useEffect, useState } from "react";
import styles from "./styles.module.scss";
import bonus from '@assets/userinfo/bonus2.png';
import iconWallet from '@assets/homeWithdraw/icon-wallet.png';
import dialogBg from '@assets/homeWithdraw/dialogBg.png';
import { useSelector } from "react-redux";
import { getUserInfo, getFreeWithdraw } from "@features/mainSlice";
import settingVip from '@assets/userinfo/settingVip.png';
import { useWithdrawMission } from "@contexts/withdrawMissionContext";
import { useNavigate } from "react-router";
import { ROUTE_PATH } from "@constants/routes";
import ReactDOM from 'react-dom';
import { Modal } from "@mui/material";
import { useThemeProvider } from "@contexts/themeContext";

const HomeWithdraw = ({ data }) => {
    // 假设进度值为 65%
    const withdrawInfo = useSelector(getFreeWithdraw);
    const { checkShowFreeWithdraw } = useThemeProvider();
    // const withdrawInfo = { "state": 3, "total": 40, "InsureScore": 10 };
    // console.error("withdrawInfo", withdrawInfo);


    const renderProgress = () => {
        let progress = (withdrawInfo.InsureScore / withdrawInfo.total) * 100;
        progress = progress >= 100 ? 100 : progress;

        if (withdrawInfo.state === 1) {
            return (
                <>
                    <div
                        className={styles.progressBar}
                        style={{ width: `${progress}%`, border: progress == 0 ? "none" : 'border: 0.07rem solid rgba(30, 248, 181, 1)' }}
                    />
                    <span className={styles.progressText}>
                        ${withdrawInfo.InsureScore} / ${withdrawInfo.total}
                    </span>
                </>
            );
        } else if (withdrawInfo.state === 2 || withdrawInfo.state === 3) {
            return (
                <>
                    <div
                        className={styles.progressBar}
                        style={{ width: `${progress}%`, border: progress == 0 ? "none" : 'border: 0.07rem solid rgba(30, 248, 181, 1)' }}
                    />
                    <div className={styles.full}>
                        <img src={settingVip} alt="" />
                        <span className={styles.blink}>First Withdrawal Available!</span>
                    </div>
                </>
            );

        } else if (withdrawInfo.state === 4) {
            return (
                <>
                    <div
                        className={`${styles.progressBar} ${styles.red}`}
                        style={{ width: `${progress}%`, border: progress == 0 ? "none" : 'border: 0.07rem solid rgba(30, 248, 181, 1)' }}
                    />

                    <span className={styles.progressText}>
                        ${withdrawInfo.InsureScore} / ${withdrawInfo.total}
                    </span>
                </>
            );

        } else {
            return <></>;
        }

    };

    const { open, setOpen } = useWithdrawMission();
    const navigate = useNavigate();
    const handleClick = () => {
        // console.error("handleClick");
        // if (withdrawInfo.state === 1) {
        //     navigate(ROUTE_PATH.FREEWITHDRAW);
        // } else if (withdrawInfo.state === 2) {
        //     navigate(ROUTE_PATH.FREEWITHDRAW);
        // } else if (withdrawInfo.state === 3) {
        //     setOpen(true);
        // } else if (withdrawInfo.state === 4) {

        // } else {

        // }
        // adjust 点击进入条
        global.tracker.trackEvent("click_progress_bar");
        global.tracker.trackEvent("click_progress_bar_count");
        global.onClickNormalWithdraw && global.onClickNormalWithdraw();
        if (openTip) setOpenTip(false);
    };

    const renderWithdrawBtn = () => {
        if (withdrawInfo.state === 1) {
            return (
                <div className={styles.right} >
                    <img src={bonus} alt="" className={styles.bonus} />
                    <span>Withdraw</span>
                </div>
            );
        } else if (withdrawInfo.state === 2) {
            return (
                <div className={styles.right} >
                    <img src={bonus} alt="" className={styles.bonus} />
                    <span>Withdraw</span>
                </div>
            );
        } else if (withdrawInfo.state === 3) {
            return (
                <>
                    <div className={`${styles.right} ${styles.highlight}`} >
                        <img src={bonus} alt="" className={styles.bonus} />
                        <span>Withdraw</span>
                    </div>
                </>

            );
        } else if (withdrawInfo.state === 4) {
            return (
                <div className={`${styles.right} ${styles.disabled}`} >
                    <img src={bonus} alt="" className={styles.bonus} />
                    <span>Withdraw</span>
                </div>
            );
        } else {
            return <></>;
        }

    };

    const [openTip, setOpenTip] = useState(false);
    const handleClickMask = () => {
        setOpenTip(false);
        global.openNextPopup();
    };

    global.showHomeWithdrawTip = (open) => {
        setOpenTip(open);
    };

    if (!checkShowFreeWithdraw()) {
        return <div style={{ marginTop: ".8rem" }} ></ div>;
    }

    return (
        <>
            {
                openTip ?
                    <div className={styles.withdrawTipMask} onClick={handleClickMask} >
                    </div>
                    :
                    <></>
            }
            <div className={`${styles.container} ${openTip ? styles.setTip : ""}`} onClick={handleClick}>
                {/* this is a tester */}
                <div className={styles.left}>
                    <div className={styles.top}>
                        <span>Total Free Bonus</span>
                        <span className={styles.cash}>${withdrawInfo.InsureScore}</span>
                    </div>

                    <div className={styles.bottom}>
                        {renderProgress()}
                    </div>

                </div>

                {renderWithdrawBtn()}


                {
                    openTip ?
                        <div className={styles.withdrawTip} style={{ backgroundImage: `url(${dialogBg})` }} >
                            <img src={iconWallet} alt="" />
                            <span>You can withdraw here</span>
                        </div>
                        : <></>
                }
            </div >

        </>

    );
};
export default HomeWithdraw;
