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";
const i18n=global.i18n;

const WInstallBox = () => {
    const {isMobile} = useThemeProvider();
    const [isShow, setIsShow] = useState(false);
    const installRef = useRef(null);
    const [iconUrl, setIconUrl] = useState("");
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const onInstall=()=>{
        if (isInAppBrowser()){
            openUrlUseChrome();
        }
        else
        {
            openProgressierInstall();
            setIsShow(false);
        }
    }
    const onCancel=()=>{
        setIsShow(false);
    }
    useEffect(()=>{
        const installBox={
            show,
            hide
        };
        global.installBox=installBox;
        if (window.progressier!=null){
            if (window.progressier.data!=null){
                let params=window.progressier.data.params;
                if (params!=null){
                    setIconUrl(params.icon180);
                }
            }
        }
    },[])
    const renderInstall=()=>{
        return (
            <div className={styles.continer}>
                <div className={styles.install_con}>
                    <img src={iconUrl}/>
                    <span>{i18n.t("installBox.tips")}</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_install")}
                    </button>
                </div>
            </div>
        )
    }
    const renderMobile = () => {
        return (
            <MuiDrawer open={isShow}
                       anchor={"bottom"}
                       sx={{
                           pointerEvents: 'auto',
                           zIndex: 'var(--zindex-install)',
                           "& .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;