import React, { useEffect, useState } from "react";
import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import LazyImage from "@components/LazyImage";
import { useNavigate } from "react-router";
import { ROUTE_PATH } from "@constants/routes";
import img_wallet from '@assets/icon_wallet.png';
import img_cash from "@assets/withdraw_limit/icon_cash.webp";
import img_crown from "@assets/withdraw_limit/icon_crown.webp";
import img_table from "@assets/withdraw_limit/icon_table.webp";
import img_higher from "@assets/withdraw_limit/icon_higher.webp";
import img_instant from "@assets/withdraw_limit/icon_instant.png";
import img_service from "@assets/withdraw_limit/icon_service.webp";

const i18n = global.i18n;
const WWithdrawLimit = () => {
    const [isShow, setIsShow] = useState(false);
    const navigate = useNavigate();
    const show = (type) => {
        setIsShow(true);
    }
    const hide = () => {
        setIsShow(false);
    }
    const onDeposit = () => {
        // adjust 点击VIP权益弹窗按钮
        global.tracker.trackEvent("click_deposit");
        global.tracker.trackEvent("click_deposit_count");
        global.enterRechargeType = 2;
        hide();
        navigate(ROUTE_PATH.FIRSTDEPOSIT);
    }
    useEffect(() => {
        const withdrawLimit = {
            show,
            hide
        };
        global.withdrawLimit = withdrawLimit;
    }, [])

    return (
        <Popup onClose={() => { }} open={isShow} btnCloseType={0} popupClass="popup-overflow">
            <div className={styles.container}>
                <div className={styles.title_imgs}>
                    <LazyImage className={styles.wallet_icon} src={img_wallet} alt={""} />
                    <LazyImage className={styles.table_icon} src={img_table} alt={""} />
                </div>
                <div className={styles.title_lbl}>
                    {i18n.t("withdraw.limit.title_1")}<br />
                    {i18n.t("withdraw.limit.title_2")}
                </div>
                <div className={styles.lbl_des}>
                    {i18n.t("withdraw.limit.desc_1")}<br />
                    {i18n.t("withdraw.limit.desc_2")}
                </div>

                <div className={styles.item_box}>
                    <div className={styles.left_box}>
                        <LazyImage src={img_instant} alt={""} />
                    </div>
                    <p>{i18n.t("withdraw.limit.instant")}</p>
                    <img className={styles.right_icon} src={img_crown} />
                </div>
                <div className={styles.item_box}>
                    <div className={styles.left_box}>
                        <LazyImage src={img_higher} alt={""} />
                    </div>
                    <p>{i18n.t("withdraw.limit.higher")}</p>
                    <img className={styles.right_icon} src={img_crown} />
                </div>
                <div className={styles.item_box}>
                    <div className={styles.left_box}>
                        <LazyImage src={img_cash} alt={""} />
                    </div>
                    <p>{i18n.t("withdraw.limit.exclusive")}</p>
                    <img className={styles.right_icon} src={img_crown} />
                </div>
                <div className={styles.item_box}>
                    <div className={styles.left_box}>
                        <LazyImage src={img_service} alt={""} />
                    </div>
                    <p>{i18n.t("withdraw.limit.priority")}</p>
                    <img className={styles.right_icon} src={img_crown} />
                </div>

                <div className={styles.lbl_tips}>
                    {i18n.t("withdraw.limit.tips_1")}<br />
                    {i18n.t("withdraw.limit.tips_2")}
                </div>

                <button className="button-green2" onClick={onDeposit}>
                    {i18n.t("withdraw.limit.button")}
                </button>
                <button className={styles.btn_later} onClick={hide}>
                    {i18n.t("withdraw.limit.later")}
                </button>
            </div>
        </Popup>

    )
}
export default WWithdrawLimit;