import {useEffect, useRef, useState} from "react";
import {useThemeProvider} from "@contexts/themeContext";
import MuiDrawer from "@mui/material/Drawer";
import styles from "./styles.module.scss";
import {
    isInAppBrowser,
    openProgressierInstall,
    openUrlUseChrome
} from "@utils/UAUtils";
import Fade from "@mui/material/Fade";
import Grow from "@mui/material/Grow";
import Modal from "@mui/material/Modal";
import Http from "@api/request";
import {useSelector} from "react-redux";
import {getDownloadConf} from "@features/mainSlice";
import {stringFormat} from "@utils/helpers";
const i18n=global.i18n;
const objInfo={
    count:0,
    timer:null
}
const WInstallBox = () => {
    const {isMobile} = useThemeProvider();
    const [isShow, setIsShow] = useState(false);
    const installRef = useRef(null);
    const [iconUrl, setIconUrl] = useState("");
    const downloadConf= useSelector(getDownloadConf);
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const clearTimer=()=>{
        if (objInfo.timer!=null){
            clearInterval(objInfo.timer);
            objInfo.timer=null;
            objInfo.count=0;
        }
    }
    const onInstall=()=>{
        setIsShow(false);
        global.showDownBox();
        return;
        if (isInAppBrowser()){
            openUrlUseChrome();
        }
        else
        {
            openProgressierInstall();
            setIsShow(false);
        }
    }
    const onCancel=()=>{
        setIsShow(false);
        return;
        let apkUrl=Http.getAPKUrl();
        window.open(apkUrl);
        setIsShow(false);
    }
    useEffect(()=>{
        const installBox={
            show,
            hide
        };
        global.installBox=installBox;
        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 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 renderInstall=()=>{
        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={onCancel}>
                        {i18n.t("installBox.btn_cancel")}
                    </button>
                    <button className={`${styles.install_btn} ${styles.btn_green}`} onClick={onInstall}>
                        {i18n.t("installBox.btn_downnow")}
                    </button>
                </div>
            </div>
        )
    }
    const renderMobile = () => {
        return (
            <MuiDrawer open={isShow}
                       anchor={"bottom"}
                       sx={{
                           pointerEvents: 'auto',
                           zIndex: 'var(--zIndex-popup)',
                           "& .MuiDrawer-paper": {
                               boxSizing: "border-box",
                               overflow: 'visible !important',
                               backgroundColor: '#fff;',
                               boxShadow: 'var(--widget-shadow);',
                               borderTopLeftRadius: '0.71rem',
                               borderTopRightRadius: '0.71rem',
                               padding: '1.42rem'
                           },
                       }}
                       variant="temporary"
                       onClose={()=>{
                           // setIsShow(false)
                       }}>
                {renderInstall()}
            </MuiDrawer>
        )
    }
    const renderDesktop = () => {
        return (
            <Modal open={isShow} onClose={()=>{

            }} closeAfterTransition>
                <Fade in={isShow} timeout={500}>
                    <div className="popup-container">
                        <Grow in={isShow} timeout={500}>
                            <div className={styles.pop_con} style={{minHeight: 'unset'}}>
                                {renderInstall()}
                            </div>
                        </Grow>
                    </div>
                </Fade>
            </Modal>
        )
    }
    return (
        <>
        {isMobile()?renderMobile():renderDesktop()}
        </>
    )
}
export default WInstallBox;
