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, 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 protectInfo=useSelector(getProtectInfo);
    const status=useSelector(getProtectGetStatus);
    const dispatch = useDispatch();
    const {setWelfTabState}=useThemeProvider();
    const user=useSelector(getUserInfo);
    const show=()=>{
        setIsShow(true);
        setWelfTabState(APP_WELFARE.PROTECT);
        dispatch(reqProtectCheck());
    }
    const hide=()=>{
        setIsShow(false);
        setWelfTabState(-1);
    }
    const callback=(payload)=>{
        if (payload&&payload.code===200){
            hide();
        }
    }
    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;
    }
    const onGetProtect=()=>{
        if (status===REQ_STATUS.LOADING)return;
        if (!checkCanProtect())return;
        let ProtectNum=protectInfo.ProtectNum!=null?parseInt(protectInfo.ProtectNum):0;
        dispatch(reqProtectGet({callback:callback,ProtectNum:ProtectNum}));
    }
    useEffect(()=>{
        const protectReward={
            show,
            hide
        };
        global.protectReward=protectReward;
        return ()=>{
        }
    },[])
    const renderInfo=()=>{
        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;
        return (
            <div className={styles.p_info}>
                <span className={styles.title}>{i18n.t("protect.title")}</span>
                <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}>{stringFormat(i18n.t("protect.tips"),[ProtectTimes])}</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()}
                            </div>
                        </div>
                    </Grow>
                </div>
            </Fade>
        </Modal>
)
}
export default WProtect;