import React, { useEffect, useState } from "react";
import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import walletImg from "@assets/icon_wallet.png"
import LazyImage from "@components/LazyImage";
import SvgIcon from "@components/SvgIcon";
import { useNavigate } from "react-router";
import { ROUTE_PATH } from "@constants/routes";
const i18n = global.i18n;

const WFirstCashoutTips = () => {
    const [isShow, setIsShow] = useState(false);
    const navigate = useNavigate();
    const show = (type) => {
        setIsShow(true);
    }
    const hide = () => {
        setIsShow(false);
    }
    const onClose = () => {
        hide();
        global.openNextPopup();
    }
    const openWithdraw = () => {
        hide();
        // 去提现
        navigate(ROUTE_PATH.FREEWITHDRAW);
    }
    useEffect(() => {
        const firstCashoutTips = {
            show,
            hide
        };
        global.firstCashoutTips = firstCashoutTips;
    }, [])

    return (
        <Popup onClose={() => { }} open={isShow} btnCloseType={0} >
            <div className={styles.container}>
                <img className={styles.icon_img} src={walletImg} alt={i18n.t("fistCashout.title")} />
                <div className={styles.title}>
                    {i18n.t("fistCashout.title")}
                </div>

                <div className={styles.tips}>
                    {i18n.t("fistCashout.tips")}
                </div>

                <div className={styles.tips_box} onClick={openWithdraw}>
                    <SvgIcon className={styles.icon_node} herf={"icon_people2"}></SvgIcon>
                    {i18n.t("fistCashout.profile")}
                    <SvgIcon className={styles.icon_node} herf={"icon_finger"}></SvgIcon>
                </div>

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

                <div className={styles.btn_cancel} onClick={onClose}>
                    {i18n.t("fistCashout.later")}
                </div>
            </div>
        </Popup>

    )
}
export default WFirstCashoutTips;