import styles from './styles.module.scss';
import React, { useEffect } from 'react';
import usePaymentActions from '@hooks/usePaymentActions';
import { useSelector } from 'react-redux';
import { getPaymentOrderStatus } from '@features/paySlice';
import { REQ_STATUS } from '@api/config';
import usePaymentMethods from '@hooks/usePaymentMethods';
import { PaymentGears } from '@db/payment';
import MainButton from '@components/Buttons/MainButton';
import lockImg from '@assets/pay/img_lock.png';
import { ReactComponent as CheckIcon } from '@assets/withdraw/icon_check.svg';

const i18n = global.i18n;

const PaymentOption = ({ active, img, name, onClick }) => {
    return (
        <div className={`${styles.item_box} ${active ? styles.active : ""}`} onClick={onClick}>
            <img alt="" src={img || null} />
            <span>{name}</span>
            {
                active && <div className={styles.flag}>
                    <CheckIcon />
                </div>
            }

        </div>
    )
}


const WPaymentMethods = () => {
    const goods = global.curGoods || {};
    // const goods = {
    //     "price": "29.99",
    //     "goodsName": "",
    //     "GiftsID": "304",
    //     "gear": `[{"name":"cashapp","group_id":1,"value":1,"status":1},{"name":"cashbtcpay","group_id":1,"value":16,"status":1},{"name":"eth","group_id":2,"value":32,"status":1},{"name":"usdc","group_id":2,"value":2048,"status":1},{"name":"cashapp","group_id":1,"value":1,"status":1},{"name":"paypal","group_id":0,"value":2,"status":1},{"name":"applepay","group_id":0,"value":4,"status":1},{"name":"cashbtcpay","group_id":1,"value":16,"status":1}]`
    // }

    const { getPaymentOrder } = usePaymentActions();
    const orderStatus = useSelector(getPaymentOrderStatus);
    const {
        mainGears,
        gearSelection,
        getSubGears,
        onChooseMethod,
        getChoiseGear,
    } = usePaymentMethods(goods)
    useEffect(() => {
        // adjust 进入支付控制台
        global.tracker.trackEvent("enter_recharge_control");
        global.tracker.trackEvent("enter_recharge_control_count");
    }, []);

    const onBtnPayClick = () => {
        if (orderStatus === REQ_STATUS.LOADING) return;

        const gear = getChoiseGear();
        if (!gear) return;
        getPaymentOrder({
            ...goods,
            pay_method: gear.value,
            pay_name: gear.name
        });
    }

    const renderSubMethods = (main) => {
        const subs = getSubGears();
        const subIdx = gearSelection.subIdx;

        if (subs.length === 0) return <></>;
        return (
            <div className={styles.subs_box}>
                <span>{i18n.t("deposit.gears.sub_method", { method: main })}</span>
                <div className={styles.subs_list}>
                    {
                        subs.map((gear, idx) => {
                            const config = PaymentGears[gear] || {};
                            const active = subIdx === idx;
                            return (
                                <div key={`sub_gear_${gear}`}
                                    className={`${styles.sub_item} ${active && 'select-border'}`}
                                    onClick={() => { onChooseMethod(-1, idx) }}>
                                    <img alt="" src={config?.icon} />
                                    <span>{config?.name || gear}</span>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }

    return (
        <div className={styles.container}>
            <div className={styles.lbl_money}>
                <span>{global.DOLLAR}{goods.price}</span>
                {
                    (global.curGoods && global.curGoods.GiftsID) && <span>{i18n.t("deposit.gift_pack")}</span>
                }
            </div>
            {
                mainGears.map((item, index) => {
                    const config = PaymentGears[item] || {};
                const active = index === gearSelection.gearIdx;
                    return (
                        <React.Fragment key={item}>
                            <PaymentOption
                                active={active}
                                img={config?.icon}
                                name={config?.name || item}
                                onClick={() => { onChooseMethod(index) }} />

                            {
                                active && renderSubMethods(item)
                            }
                        </React.Fragment>

                    )
                })
            }

            <MainButton
                className={styles.btn_pay}
                loading={orderStatus === REQ_STATUS.LOADING}
                onClick={onBtnPayClick}>
                {/* <span>{getDepositBtnDesc(goods.price)}</span> */}
                <span>{i18n.t("deposit.btn_payment")}</span>
            </MainButton>

            <div className={styles.hint}>
                <img src={lockImg} alt='' />
                <span>{i18n.t("deposit.pay_hint")}</span>
            </div>
        </div >

    )
}

export default WPaymentMethods