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

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

    // /bindsms    {phone,code,password,repassword}
    const hide = () => {
        setIsShow(false);
        global.hideDropCoins?.();
    }
    const onClose = () => {
        hide();
    }
    const onLeaveClick = () => {
        onLeave?.();
        hide();
    }
    const openWithdraw = () => {
        hide();
        openWithdrawInGame();
        // adjust 游戏内点击引导提款弹窗
        global.tracker?.trackEvent?.("click_withdraw_panel");
        global.tracker?.trackEvent?.("click_withdraw_panel_count");
    }
    useEffect(() => {
        const gameWithdrawTips = {
            show: (type) => {
                setViewType(type);
                setIsShow(true);
            },
            hide: () => {
                setIsShow(false);
                global.hideDropCoins?.();
            },
        };
        global.gameWithdrawTips = gameWithdrawTips;
        return () => {
            if (global.gameWithdrawTips === gameWithdrawTips) delete global.gameWithdrawTips;
        }
    }, [])

    /// 未达到提现条件
    const renderLeaveTips = () => {
        return (
            <div className={styles.container}>
                <img className={styles.bonus_box} 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>

                <MainButton onClick={onClose}>
                    {i18n.t("gameLeaveTips.playMore")}
                </MainButton>

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

    /// 提现未达到要求
    const renderNotEnough = () => {
        return (
            <div className={`${styles.container}  ${styles.not_enough}`}>
                <img className={styles.bonus_box} src={lockedImg} alt={''} />
                <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}>{`${global.DOLLAR}${lackMoney}`}</span>
                    {i18n.t("gameLeaveTips.not_enough.tips2")}
                </div>

                <MainButton onClick={onClose}>
                    {i18n.t("gameLeaveTips.ok")}
                </MainButton>
            </div>
        );
    }

    /// 提现已解锁
    const renderUnlocked = () => {
        return (
            <div className={styles.container}>
                <LazyImage className={styles.bonus_box} 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>

                <MainButton onClick={openWithdraw}>
                    {i18n.t("gameLeaveTips.withdraw.now")}
                </MainButton>

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

    )
}
export default WGameWithdrawTips;