import React, { useEffect, useState } from "react";
import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import lockedImg from "@assets/newuser_bonus.webp";
import unlockImg from "@assets/newuser_bonus.webp";
import LazyImage from "@components/LazyImage";
import { isLandscape, stringFormat } from "@utils/helpers";
import useFreeWithdraw from "@hooks/useFreeWithdraw";
import { useOrientation } from "react-use";
const i18n = global.i18n;

const WGameWithdrawTips = ({ onLeave, currentAmount, totalAoumt, forceLandscape = false }) => {
    const [isShow, setIsShow] = useState(false);
    const [viewType, setViewType] = useState(0);
    const lackMoney = (totalAoumt - currentAmount).toFixed(2);
    const { openWithdrawInGame } = useFreeWithdraw();
    const orientation = useOrientation();

    // /bindsms    {phone,code,password,repassword}
    const show = (type) => {
        //setFullCoin(type == 3);
        setViewType(type);
        setIsShow(true);

        if (type == 3 && !forceLandscape) global.showDropCoins();
    }
    const hide = () => {
        setIsShow(false);
        global.hideDropCoins();
    }
    const onClose = () => {
        hide();
    }
    const onLeaveClick = () => {
        onLeave && onLeave();
        hide();
    }
    const openWithdraw = () => {
        hide();
        openWithdrawInGame();
        // adjust 游戏内点击引导提款弹窗
        global.tracker.trackEvent("click_withdraw_panel");
        global.tracker.trackEvent("click_withdraw_panel_count");
    }
    useEffect(() => {
        const gameWithdrawTips = {
            show,
            hide
        };
        global.gameWithdrawTips = gameWithdrawTips;
        return () => {

        }
    }, [])

    /// 未达到提现条件
    const renderLeaveTips = () => {
        return (
            <div className={styles.container}>
                <img src={lockedImg} alt={i18n.t("gameLeaveTips.leave_tips.title")} />
                <div className={styles.title}>
                    {stringFormat(i18n.t("gameLeaveTips.leave_tips.title"), [lackMoney])}
                </div>
                <div className={styles.tips}>
                    {i18n.t("gameLeaveTips.leave_tips.tips")}
                    <br />
                    {i18n.t("gameLeaveTips.leave_tips.tips2")}
                </div>

                <button className={styles.btn_confirm} onClick={onClose}>{i18n.t("gameLeaveTips.playMore")}</button>

                <div className={styles.btn_cancel} onClick={onLeaveClick}>
                    {i18n.t("gameLeaveTips.leave")}
                </div>
            </div>
        );
    }

    /// 提现未达到要求
    const renderNotEnough = () => {
        return (
            <div className={`${styles.container}  ${styles.not_enough}`}>
                <div className={styles.title}>
                    {i18n.t("gameLeaveTips.not_enough.title")}
                </div>
                <div className={styles.tips}>
                    {i18n.t("gameLeaveTips.not_enough.tips")}
                    <span className={styles.lbl_money}>{`$${lackMoney}`}</span>
                    {i18n.t("gameLeaveTips.not_enough.tips2")}
                </div>

                <button className={styles.btn_confirm} onClick={onClose}>{i18n.t("gameLeaveTips.ok")}</button>
            </div>
        );
    }

    /// 提现已解锁
    const renderUnlocked = () => {
        return (
            <div className={styles.container}>
                <LazyImage src={unlockImg} alt={i18n.t("gameLeaveTips.withdraw.title")} />
                <div className={styles.title_withdraw}>
                    {i18n.t("gameLeaveTips.withdraw.title")}
                </div>
                <div className={styles.tips}>
                    {i18n.t("gameLeaveTips.withdraw.tips")}
                    <br />
                    {i18n.t("gameLeaveTips.withdraw.tips2")}
                </div>

                <button className={styles.btn_confirm} onClick={openWithdraw}>{i18n.t("gameLeaveTips.withdraw.now")}</button>

                <div className={styles.btn_cancel} onClick={onClose}>
                    {i18n.t("gameLeaveTips.withdraw.later")}
                </div>
            </div>
        );
    }

    const renderView = () => {
        switch (viewType) {
            case 1: return renderLeaveTips();
            case 2: return renderNotEnough();
            case 3: return renderUnlocked();
            default: return <></>
        }
    }

    return (
        <>
            <Popup
                onClose={() => { }}
                popupClass={isLandscape(orientation) || forceLandscape ? "popup-landscape" : ""}
                open={isShow}
                btnCloseType={0}
                zIndex={130}
                rootClass={forceLandscape ? "popup-rotate" : ""}
            >
                {renderView()}
            </Popup>

            {/* {fullCoin && createPortal(
                <DropCoins />,
                document.body
            )} */}
        </>

    )
}
export default WGameWithdrawTips;
