import React, { useEffect, useState } from "react";
import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import usdimg from "@assets/newuser_bonus.webp";
import LazyImage from "@components/LazyImage";
import SvgIcon from "@components/SvgIcon";
import { toast } from "react-toastify";
import { useThemeProvider } from "@contexts/themeContext";
const i18n = global.i18n;

const WNewUserBonus = ({ }) => {
    const [isShow, setIsShow] = useState(false);
    const { openRecommandGame } = useThemeProvider();
    // /bindsms    {phone,code,password,repassword}
    const show = () => {
        global.isNewUser = true;
        setIsShow(true);
    }
    const hide = () => {
        global.isNewUser = false;
        setIsShow(false);
    }
    const onOpenGame = () => {
        hide();
        // adjust 点击进入游戏
        global.tracker.trackEvent("click_enter_game");
        global.tracker.trackEvent("click_enter_game_count");

        // 跳转引导游戏
        global.clearPopupFlow();
        openRecommandGame && openRecommandGame();
    }
    const onClose = () => {
        hide();
        global.openNextPopup();
    }
    useEffect(() => {
        const newUserBonus = {
            show,
            hide
        };
        global.newUserBonus = newUserBonus;
        return () => {
        }
    }, [])
    return (
        <Popup onClose={() => { }} open={isShow} popupClass={`popup-overflow ${styles.bg}`} btnCloseType={0} >
            <LazyImage className={styles.title_img} src={usdimg} alt={i18n.t("newUserPrompt.title")} />
            <div className={styles.container}>
                <div className={styles.tips}>
                    {i18n.t("newUserBonus.tips")}
                </div>
                <div className={styles.bonus}>
                    $10
                </div>
                <div className={styles.button_box}>
                    <button className={styles.button} onClick={onOpenGame}>{i18n.t("newUserBonus.button")}</button>
                </div>
            </div>

            {/* <div className={styles.button_close}>
                <SvgIcon onClick={onClose} className={styles.svg} herf={"icon_Close"}></SvgIcon>
            </div> */}
        </Popup>
    )
}
export default WNewUserBonus;