import {useEffect, useState} from "react";
import Fade from "@mui/material/Fade";
import Grow from "@mui/material/Grow";
import styles from "./styles.module.scss";
import Modal from "@mui/material/Modal";
import {useSelector} from "react-redux";
import {getDownloadConf} from "@features/mainSlice";
import {stringFormat} from "@utils/helpers";
import {ReactComponent as CloseIcon} from "@assets/singlesvg/close-circle.svg";
import Http from "@api/request";
import {useThemeProvider} from "@contexts/themeContext";
import {openProgressierInstall} from "@utils/UAUtils";
const i18n=global.i18n;
const objInfo={
    count:0,
    timer:null
}
const WDownBox = () => {
    const [isShow, setIsShow] = useState(false);
    const [iconUrl, setIconUrl] = useState("");
    const downloadConf= useSelector(getDownloadConf);
    const {isMobile} = useThemeProvider();
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const clearTimer=()=>{
        if (objInfo.timer!=null){
            clearInterval(objInfo.timer);
            objInfo.timer=null;
            objInfo.count=0;
        }
    }
    const getTips=()=>{
        let bonus=0;
        if(downloadConf!=null&&downloadConf.bonus!=null){
            bonus=Number(downloadConf.bonus)
        }
        return stringFormat(i18n.t("installBox.tips_1"),[global.DOLLAR+" "+bonus]);
    }
    const openShotcut=()=>{
        if(isMobile()){
            global.showShortcutGuide();
            setIsShow(false);
        }
        else
        {
            openProgressierInstall();
            setIsShow(false);
        }
    }
    const downFast=()=>{
        let light=downloadConf.light;
        if (light==null)return;
        let apkUrl=Http.getAPKUrl(light);
        window.open(apkUrl);
        setIsShow(false);
    }
    const downFull=()=>{
        let full=downloadConf.full;
        if (full==null)return;
        let apkUrl=Http.getAPKUrl(full);
        window.open(apkUrl);
        setIsShow(false);
    }
    useEffect(()=>{
        const downloadBox={
            show,
            hide
        };
        global.downloadBox=downloadBox;
        if (window.progressier!=null){
            let iconUrl="";
            let initIconUrl=()=>{
                if (window.progressier.data!=null){
                    let params=window.progressier.data.params;
                    if (params!=null){
                        // setIconUrl(params.icon180);
                        iconUrl=params.icon180;
                    }
                }
            }
            clearTimer();
            if (iconUrl==null||iconUrl===""){
                objInfo.timer=setInterval(()=>{
                    if (objInfo.count>=10){
                        clearTimer();
                        return;
                    }
                    initIconUrl();
                    if (iconUrl!=null&&iconUrl!==""){
                        setIconUrl(iconUrl);
                        clearTimer();
                    }
                    objInfo.count++;
                },200);
            }
            else
            {
                setIconUrl(iconUrl);
            }
        }
        return ()=>{
            clearTimer();
        }
    },[])
    const renderDownBox=()=>{
        return (
            <>
                <div className={styles.continer}>
                    <div className={styles.install_con}>
                        <img src={iconUrl}/>
                        {/*<span>{i18n.t("installBox.tips")}</span>*/}
                        <span>{getTips()}</span>
                    </div>
                    <div className={styles.install_btn_con}>
                        <button className={styles.install_btn} onClick={openShotcut}>
                            <span>{i18n.t("installBox.down_type_1")}</span>
                        </button>
                        <button className={styles.install_btn} onClick={downFast}>
                            <span>{i18n.t("installBox.down_type_2")}</span>
                        </button>
                    </div>
                    <div className={`${styles.install_btn_con} ${styles.install_btn_con_full}`}>
                        <button className={`${styles.install_btn} ${styles.btn_green}`} onClick={downFull}>
                            <span>{i18n.t("installBox.down_type_3")}</span>
                        </button>
                    </div>
                </div>
            </>
        )
    }
    return (
        <>
            <Modal open={isShow} onClose={() => {
                hide();
            }} closeAfterTransition>
            <Fade in={isShow} timeout={500}>
                    <div className="popup-container">
                        <Grow in={isShow} timeout={500}>
                            <div className={styles.popup_con}>
                                <div className={styles.pop_con}>
                                    {renderDownBox()}
                                </div>
                                <button className={styles.pop_close_btn} onClick={hide}>
                                    <CloseIcon className={styles.icon}></CloseIcon>
                                </button>
                            </div>
                        </Grow>
                    </div>
                </Fade>
            </Modal>
        </>
    )
}
export default WDownBox;
