import SvgIcon from '@components/SvgIcon';
import styles from './styles.module.scss';
import { use, useEffect, useState } from 'react';
import BRWithdraw from './BR/BRWithdraw';
import { useDispatch, useSelector } from 'react-redux';
import { getUserInfo, getUserInsureScore } from '@features/mainSlice';
import { getWDPayoutStatus, getWithdrawBaseInfo } from '@features/paySlice';
import { numFormatter } from '@utils/helpers';
import { reqWithdrawBaseInfo, reqWithdrawPayout } from '@features/api';
import WWithdrawalInfo from '@widgets/WWithdrawalInfo';
import { REQ_STATUS } from '@api/config';
import { ROUTE_PATH } from '@constants/routes';
import { useNavigate } from 'react-router';
const WWithdraw = ({ close }) => {
    const user = useSelector(getUserInfo);
    const insureScore = useSelector(getUserInsureScore);
    const info = useSelector(getWithdrawBaseInfo);
    const payoutStatus = useSelector(getWDPayoutStatus)
    const [maxAmount, setMaxAmount] = useState(0);
    const [amount, setAmount] = useState(0);
    const [minAmount, setMinAmount] = useState(0);
    const [balance, setBalance] = useState(0);
    const dispatch = useDispatch();
    const navigator = useNavigate();

    useEffect(() => {
        dispatch(reqWithdrawBaseInfo());
    }, [])

    useEffect(() => {
        if (info != null) {
            setBalance(info.SumCanExchange / global.CASH_BASE);
            setMaxAmount(info.MaxExchange / global.CASH_BASE)
            setMinAmount(info.MinExchange / global.CASH_BASE)
        }
    }, [info])

    const onMaxBtnClick = () => {
        let max = Math.min(balance, maxAmount);
        setAmount(max);
    }

    const handleAmount = (value) => {
        let max = Math.min(balance, maxAmount);
        value = Math.min(value, max);
        setAmount(value);
    }

    const onWithdraw = () => {
        if (payoutStatus === REQ_STATUS.LOADING) return;

        if (amount === 0) {
            return;
        }

        let value = amount * global.CASH_BASE;
        dispatch(reqWithdrawPayout({
            score: value
        }))
    }

    const onDeposit = () => {
        navigator(ROUTE_PATH.FIRSTDEPOSIT);

        // adjust 设置充值类型
        global.enterRechargeType = 0;
    }

    const renderDisable = () => {
        return (
            <div className={styles.disable_box}>
                <div className={styles.blance_box}>
                    <div>
                        <span className={styles.warnlbl}>VIP 1 </span>
                        can withdraw money
                    </div>
                    <div>
                        The minimum withdrawal amount is
                        <span className={styles.greenlbl}> $40</span>
                    </div>

                    <div className={styles.blance_line}>
                        <div className={styles.blance_item}>
                            <>My Balance</>
                            <br />
                            <div className={styles.boldlbl}>$ {insureScore}</div>
                        </div>

                        <div className={`${styles.blance_item} ${styles.greenlbl}`}>
                            <>Withdrawn Balance</>
                            <br />
                            <div className={styles.tx_b_m_l}>
                                <span className={styles.tx_b_m_l_m}>$ 0</span>
                                <span className={styles.tx_b_m_yet}>
                                    Not yet deposited
                                </span>
                            </div>
                        </div>
                    </div>

                    <button className={styles.tx_gray_btn}>Withdraw Now</button>
                </div>

                <div className={styles.enable_tips}>
                    After making a deposit to become a <br />
                    VIP, the money you earned in the game <br />
                    can be withdrawn
                </div>

                <div className={styles.deposit_btn}>
                    <button className={styles.btn_deposit} onClick={onDeposit}>Deposit</button>
                    <div className={styles.gift_tips}>
                        <SvgIcon className={styles.gift_icon} herf={"icon_Gift"}></SvgIcon>
                        270%
                    </div>
                </div>
            </div>
        )
    }

    const renderWithdraw = () => {
        return (
            <div className={styles.a_container}>
                <div className={styles.a_balance_div}>
                    <div className={styles.item}>
                        <div className={styles.item_title}>Total Balance</div>
                        <div className={styles.item_line}></div>
                        <div className={styles.item_money}>
                            <div className={styles.circle}>$</div>
                            {numFormatter(user.Score)}
                        </div>
                    </div>

                    <div className={styles.item}>
                        <div className={styles.item_title}>Withdrawable Balance</div>
                        <div className={styles.item_line}></div>
                        <div className={styles.item_money2}>
                            {info == null ? 0 : numFormatter(balance)}
                        </div>
                    </div>
                </div>

                <div className={styles.form_box}>
                    <div className={styles.amount_title}>
                        Withdraw Amount
                        <div className={styles.row_line}>
                            <div className={styles.dot_box}>?</div>
                            <span>&nbsp;&nbsp;Min: ${minAmount}</span>
                        </div>
                    </div>
                    <div className={styles.amount_box}>
                        $
                        <input
                            className={styles.input_box}
                            type='number' value={amount}
                            onChange={e => handleAmount(e.target.value)} />
                        <button className={styles.max_btn} onClick={onMaxBtnClick}>Max</button>
                    </div>

                    <div>WALLET TYPE</div>
                    <WWithdrawalInfo
                        loading={payoutStatus === REQ_STATUS.LOADING}
                        onConfirm={onWithdraw}
                    />
                </div>
            </div>
        )
    }

    return (
        //page-top
        <div className={`${styles.container} page-top`}>
            {user.vip > 0 ? renderWithdraw() : renderDisable()}
        </div>
    )
}
export default WWithdraw;
