import { useEffect, useState } from "react";
import Fade from "@mui/material/Fade";
import Modal from "@mui/material/Modal";
import styles from "./styles.module.scss";
import Grow from "@mui/material/Grow";
import SmallLoading from "@components/SmallLoading";
import { useDispatch, useSelector } from "react-redux";
import { getProtectGetStatus, getProtectInfo } from "@features/protectSlice";
import { formatCash, isFrequentTap, stringFormat } from "@utils/helpers";
import { REQ_STATUS } from "@api/config";
import { reqProtectCheck, reqProtectGet } from "@features/api";
import { APP_WELFARE } from "@constants/app";
import { useThemeProvider } from "@contexts/themeContext";
import { getUserInfo } from "@features/mainSlice";
const i18n = global.i18n;
const WProtect = () => {
    const [isShow, setIsShow] = useState(false);
    const [isLock, setIsLock] = useState(false);
    const protectInfo = useSelector(getProtectInfo);
    const status = useSelector(getProtectGetStatus);
    const dispatch = useDispatch();
    const { setWelfTabState } = useThemeProvider();
    const user = useSelector(getUserInfo);
    const show = () => {
        setIsShow(true);
        setIsLock(false);
        setWelfTabState(APP_WELFARE.PROTECT);
        dispatch(reqProtectCheck());
    };
    const hide = () => {
        setIsShow(false);
        setWelfTabState(-1);
    };
    const callback = (payload) => {
        if (payload && payload.code === 200) {
            hide();
        } else {
            setIsLock(false);
        }
    };
    const checkCanProtect = () => {
        // if (user!=null&&protectInfo!=null){
        //     let Score=Number(user.Score)*global.CASH_BASE;
        //     let ProtectLimit=protectInfo.ProtectLimit!=null?parseInt(protectInfo.ProtectLimit):0;
        //     let CurProtectTimes=protectInfo.CurProtectTimes!=null?parseInt(protectInfo.CurProtectTimes):0;
        //     let ProtectTimes=protectInfo.ProtectTimes!=null?parseInt(protectInfo.ProtectTimes):0;
        //     return (Score<ProtectLimit)&&(CurProtectTimes<ProtectTimes);
        // }
        // return false;
        return true;
    };
    const onGetProtect = () => {
        if (status === REQ_STATUS.LOADING) return;
        if (!checkCanProtect()) return;

        if (isLock) return;
        setIsLock(true);
        let ProtectNum = protectInfo.ProtectNum != null ? parseInt(protectInfo.ProtectNum) : 0;
        dispatch(reqProtectGet({ callback: callback, ProtectNum: ProtectNum }));
    };
    useEffect(() => {
        const protectReward = {
            show,
            hide
        };
        global.protectReward = protectReward;
        return () => {
        };
    }, []);
    let ProtectLimit = protectInfo.ProtectLimit ? formatCash(Number(protectInfo.ProtectLimit), 0) : 0;
    let ProtectNum = protectInfo.ProtectNum ? formatCash(Number(protectInfo.ProtectNum), 0) : 0;
    let ProtectTimes = protectInfo.ProtectTimes ? parseInt(protectInfo.ProtectTimes) : 0;

    const renderInfo = () => {
        return (
            <div className={styles.p_info}>
                {/* <span className={styles.title}>{i18n.t("protect.title")}</span> */}
                <img className={styles.title} src={require("@assets/protect/p_title.png")} />
                <div className={styles.des}>
                    {i18n.t("protect.des")}
                    <span className={styles.coin}>{global.DOLLAR + ProtectLimit}</span>
                </div>
                <div className={styles.rewad}>{global.DOLLAR + ProtectNum}</div>
                <span className={styles.tips}> {i18n.t("protect.lucky")}</span>
            </div>
        );
    };
    const renderGetBtn = () => {
        let isDisabled = !checkCanProtect();
        return (
            <button className={`${styles.p_get_btn} ${isDisabled ? styles.p_get_btn_disabled : ''}`} onClick={onGetProtect} disabled={isDisabled}>
                {
                    status === REQ_STATUS.LOADING ? (<SmallLoading fill={"#fff"} />) : (
                        <span className={styles.text}>
                            {i18n.t("protect.btn_get")}
                        </span>
                    )
                }
            </button>
        );
    };
    return (
        <Modal open={isShow} onClose={hide} closeAfterTransition>
            <Fade in={isShow} timeout={500}>
                <div className={styles.container}>
                    {/* <Grow in={isShow} timeout={500}> */}
                    <div className={styles.p_con}>
                        <button className={styles.p_close} onClick={hide}>
                            <img src={require("@assets/protect/p_close.png")} />
                        </button>
                        <div className={styles.p_content}>
                            {renderInfo()}
                            {renderGetBtn()}
                            
                            <span className={styles.times}>{stringFormat(i18n.t("protect.tips"), [ProtectTimes])}</span>
                        </div>
                    </div>
                    {/* </Grow> */}
                </div>
            </Fade>
        </Modal>
    );
};
export default WProtect;