import React, { useEffect, useState } from "react";
import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import usdimg from "@assets/welcome_bg.webp";
import { useDispatch, useSelector } from "react-redux";
import LazyImage from "@components/LazyImage";
import { getRegGoldStatus, getRegStatus, isLogined } from "@features/mainSlice";
import { Button } from "@mui/material";
import { REQ_STATUS } from "@api/config";
import { reqRegister, reqRegisterGold } from "@features/api";
import SmallLoading from "@components/SmallLoading";
import { APP_LOGIN_TYPE } from "@constants/app";
import { useThemeProvider } from "@contexts/themeContext";
const i18n = global.i18n;

const WNewUserPrompt = ({ }) => {
    const [isShow, setIsShow] = useState(false);
    const [isLock, setIsLock] = useState(false);
    const regStatus = useSelector(getRegStatus);
    const isLogin = useSelector(isLogined);
    const dispatch = useDispatch();
    const { openRecommandGame } = useThemeProvider()
    // /bindsms    {phone,code,password,repassword}
    const show = () => {
        setIsShow(true);
        setIsLock(false);
    }
    const hide = () => {
        setIsShow(false);
    }
    const onClick = async () => {
        // adjust 点击注册
        global.tracker.trackEvent("click_register");
        global.tracker.trackEvent("click_register_count");
        if (regStatus === REQ_STATUS.LOADING) return;
        if (isLock) return;

        dispatch(reqRegister({ type: APP_LOGIN_TYPE.GUEST })).then((res) => {
            if (res != null && res.payload?.code === 200) {
                hide();

                global.tracker.trackEvent("click_enter_game");
                global.tracker.trackEvent("click_enter_game_count");

                // 跳转引导游戏
                global.clearPopupFlow();
                openRecommandGame && openRecommandGame();
            } else {
                setIsLock(false);
            }
        });
    }
    useEffect(() => {
        const newUserPrompt = {
            show,
            hide
        };
        global.newUserPrompt = newUserPrompt;
        return () => {
        }
    }, [])

    return (
        <Popup onClose={() => { }} open={isShow} popupClass="popup-overflow" btnCloseType={0} >
            <div className={styles.container}>
                <div className={styles.title_box}>
                    <img src={usdimg} />
                    <span>
                        {i18n.t("newUserPrompt.title")}
                    </span>
                </div>
                <div className={styles.tips}>
                    <div className={styles.name}>{i18n.t("newUserPrompt.game_name")}</div>
                    <div className={styles.ps}>{i18n.t("newUserPrompt.title_tips1")}</div>
                    <div className={styles.ps}>{i18n.t("newUserPrompt.title_tips2")}</div>
                </div>

                <div className={styles.tips_box}>
                    <div>{i18n.t("newUserPrompt.tips_1")}</div>
                    <div>{i18n.t("newUserPrompt.tips_2")}</div>
                </div>

                <div className={styles.tips_bonus}>
                    {i18n.t("newUserPrompt.bonus")}
                </div>

                <div className={styles.button_box}>
                    {
                        regStatus == REQ_STATUS.LOADING ? <button className={styles.button}>
                            <SmallLoading fill={"#fff"} />
                        </button> : <button className={styles.button} onClick={onClick}>
                            {i18n.t("newUserPrompt.button")}
                        </button>
                    }
                </div>
            </div>
        </Popup>
    )
}
export default WNewUserPrompt;