import {useEffect, useState} from "react";
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import Grow from "@mui/material/Grow";
import styles from "./styles.module.scss";
import dp01 from "@assets/ggsecurity/dp01.webp";
import dp02 from "@assets/ggsecurity/dp02.webp";
import wait from "@assets/ggsecurity/wait.webp";
import safe from "@assets/ggsecurity/safe.webp";
import done from "@assets/ggsecurity/done.webp";
import LazyImage from '@components/LazyImage';
import {getMainDomain} from "@utils/helpers";
const objInfo={};
const i18n=global.i18n;
const SCAN_ITEMS=[
    {
        title: i18n.t("securityScan.scan_title_1"),
        content: i18n.t("securityScan.scanning"),
        content1: i18n.t("securityScan.scan_content_1"),
        time: 3.3,
    }, {
        title: i18n.t("securityScan.scan_title_2"),
        content: i18n.t("securityScan.scanning"),
        content1: i18n.t("securityScan.scan_content_2"),
        time: 6.6
    }, {
        title: i18n.t("securityScan.scan_title_3"),
        content: i18n.t("securityScan.scanning"),
        time: 10,
        content1: i18n.t("securityScan.scan_content_3"),
    }
]
const WSecurityScan=() => {
    const [isShow, setIsShow] = useState(false);
    const [progress, setProgress] = useState(0);
    const isComplete = progress >= 100;
    const iconUrl="/icon-192.png";
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const clearProgressTimer=()=>{
        if (objInfo.interval!=null){
            clearInterval(objInfo.interval);
            objInfo.interval=null
        }
    }
    const onClickOpen=()=>{
        hide();
        global.showQuickInstall();
    }
    useEffect(()=>{
        global.securityScan={
            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 renderBg=()=>{
        let bg=isComplete?dp01:dp02;
        return (
            <div className={styles.bg}>
                <LazyImage src={bg} alt={"bg"}/>
            </div>
        )
    }
    const renderHead=()=>{
        return (
            <div className={styles.head}>
                <div className={styles.title}>
                    {
                        isComplete?(
                            <>
                                <div>{i18n.t("securityScan.title_1")}</div>
                                <div>{i18n.t("securityScan.title_2")}</div>
                            </>
                        ) : (
                            <>
                                <div>{i18n.t("securityScan.title")}</div>
                            </>
                        )
                    }
                </div>
                <div className={styles.subtitle}>
                    {
                        isComplete?i18n.t("securityScan.scan_content_4"):i18n.t("securityScan.scanning")
                    }
                </div>
            </div>
        )
    }
    const renderLogoBox=()=>{
        let mainDomain=getMainDomain().toUpperCase();
        return (
            <div className={styles.logo_box}>
                <div className={styles.logo}>
                    <LazyImage src={iconUrl} alt={"icon"}></LazyImage>
                </div>
                <div>
                    <div className={styles.right_title}>{mainDomain}</div>
                    <div className={styles.right_percentage}>{`${progress}%`}</div>
                    <div className={styles.right_bottom}>
                        <img className={styles.placeholder} src={safe} alt={"safe"}></img>
                        <div className={styles.tips}>{i18n.t("securityScan.scan_content_5")}</div>
                    </div>
                </div>
            </div>
        )
    }
    const renderItems=()=>{
        return (
            <>
                {
                    SCAN_ITEMS.map((item,index)=>{
                        const isScanning = progress < item.time * 10;
                        const isFinished = progress >= item.time * 10;
                        const rightIcon = isScanning?wait:done;
                        return (
                            <div key={index} className={`${styles.item} ${isFinished?styles.item_finish:""}`}>
                                <div className={styles.left}>
                                    <div className={styles.title}>{item.title}</div>
                                    <div className={styles.subtitle}>
                                        {
                                            isScanning ? item.content : item.content1
                                        }
                                    </div>
                                </div>
                                <div className={styles.right}>
                                    <img src={rightIcon} alt={"icon"}></img>
                                </div>
                            </div>
                        )
                    })
                }
            </>
        )
    }
    const renderOpenButton=()=>{
        return (
            <div className={styles.button}>
                <button onClick={onClickOpen}>{i18n.t("securityScan.btn_open")}</button>
            </div>
        )
    }
    const renderContent = () => {
        return (
            <div className={styles.content}>
                {renderHead()}
                {renderLogoBox()}
                {renderItems()}
                {renderOpenButton()}
            </div>
        )
    }
    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}>
                                {renderBg()}
                                {renderContent()}
                            </div>
                        </div>
                    </Grow>
                </div>
            </Fade>
        </Modal>
    )
}
export default WSecurityScan;
