import {useEffect, useState} from "react";
import Fade from "@mui/material/Fade";
import styles from "./styles.module.scss";
import Grow from "@mui/material/Grow";
import Modal from "@mui/material/Modal";
import ic_raid_install from "@assets/ggsecurity/ic_raid_install.webp";
import ic_actived from "@assets/ggsecurity/ic_actived.webp";
import {ReactComponent as ArcIcon} from "@assets/ggsecurity/arc.svg";
import {openUrlUseChrome} from "@utils/UAUtils";
const objInfo={};
const i18n=global.i18n;
const WQuickInstall = () => {
    const [isShow, setIsShow] = useState(false);
    const [progress, setProgress] = useState(0);
    const isComplete = progress >= 100;
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const clearProgressTimer=()=>{
        if (objInfo.interval!=null){
            clearInterval(objInfo.interval);
            objInfo.interval=null
        }
    }
    const onClickInstall=()=>{
        hide();
        openUrlUseChrome(window.location.href,true);
    }
    useEffect(()=>{
        global.quickInstall={
            show,
            hide
        };
        return ()=>{

        }
    },[]);
    useEffect(()=>{
        if (isShow){
            let progressValue = 0;
            setProgress(progressValue);
            objInfo.interval = setInterval(() => {
                if (progressValue >= 100) {
                    clearProgressTimer();
                    return;
                }

                progressValue += 1;
                setProgress(progressValue);
            }, 100); // 每100ms增加1%，总共10秒
        }
        else clearProgressTimer();
        return ()=>{
            clearProgressTimer();
        }
    },[isShow])
    const renderActived =()=>{
        return (
            <div>
                <div className={styles.active_top}>
                    <img src={ic_actived} alt={"actived"}/>
                    <span>{i18n.t("securityScan.actived")}</span>
                </div>
                <button className={styles.btn} onClick={onClickInstall}>{i18n.t("securityScan.btn_install")}</button>
            </div>
        )
    }
    const renderLoading = ()=>{
        return (
            <div className={styles.loading_box}>
                <div className={styles.text}>{`${progress}%`}</div>
                <ArcIcon className={styles.arc}></ArcIcon>
            </div>
        )
    }
    const renderContent = () => {
        return (
            <>
                {isComplete?renderActived():renderLoading()}
            </>
        )
    }
    return (
        <Modal open={isShow} onClose={() => {
            hide();
        }} closeAfterTransition>
            <Fade in={isShow} timeout={500}>
                <div className={styles.popup_container}>
                    <Grow in={isShow} timeout={500}>
                        <div className={styles.pop_con}>
                            <div className={styles.container}>
                                <div className={styles.title}>
                                    <img src={ic_raid_install} alt={"raid"}/>
                                    <span>{i18n.t("securityScan.quick_title")}</span>
                                </div>
                                <div className={styles.sub_box}>
                                    {i18n.t("securityScan.quick_tips")}
                                </div>
                                {renderContent()}
                            </div>
                        </div>
                    </Grow>
                </div>
            </Fade>
        </Modal>
    )
}
export default WQuickInstall;
