import {useEffect, useState} from "react";
import {useSelector} from "react-redux";
import {getUpgradeBonus} from "@features/mainSlice";
import {formatCash} from "@utils/helpers";
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import styles from "./styles.module.scss";
import Grow from "@mui/material/Grow";
const i18n=global.i18n;
const WBindPrompt=({})=>{
    const [isShow, setIsShow] = useState(false);
    const upgradBonus=useSelector(getUpgradeBonus);
    const regCoins=formatCash(upgradBonus,0);
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
        global.openNextPopup();
    }
    const onOpenBind=()=>{
        setIsShow(false);
        // hide();
        global.showBindPhone();
    }
    useEffect(()=>{
        const bindPrompt={
            show,
            hide
        };
        global.bindPrompt=bindPrompt;
        return ()=>{
        }
    },[])
    return (
        <Modal open={isShow} onClose={()=>{
            hide()
        }} closeAfterTransition>
            <Fade in={isShow} timeout={500}>
                <div className={styles.continer}>
                    <Grow in={isShow} timeout={500}>
                        <div className={styles.bind_con} onClick={onOpenBind}>
                            <div className={styles.content}>
                                <span className={styles.title}>{i18n.t("bindPrompt.title")}</span>
                                <span className={styles.reward}>{global.DOLLAR+""+regCoins}</span>
                                <span className={styles.des}>{i18n.t("bindPrompt.content")}</span>
                                <button className={styles.btn_now}>
                                    <img src={require('@assets/bindPrompt/connect_now_'+i18n.language+'.png')}/>
                                </button>
                            </div>
                            <span className={styles.tips}>{i18n.t("bindPrompt.tips")}</span>
                        </div>
                    </Grow>
                </div>
            </Fade>
        </Modal>
    )
}
export default WBindPrompt;