import LazyImage from '@components/LazyImage';
import styles from './styles.module.scss'
import likeImg from "@assets/icon_like.png"
import { useEffect, useState } from 'react';
import WMarqueeVertical from '@widgets/WMarqueeVertical';
import usePaymentActions from '@hooks/usePaymentActions';
import { useSelector } from 'react-redux';
import { getPaymentOrderStatus } from '@features/paySlice';
import { REQ_STATUS } from '@api/config';
import SmallLoading from '@components/SmallLoading';
import { DepositUsers } from '@constants/virtualUser';
import { isFrequentTap } from '@utils/helpers';
const i18n = global.i18n;


const WRecharge = ({ goods, onSelect, goodsName = "", giftId = 0 }) => {
    const [amoun, setAmount] = useState(0);
    const [goodsIdx, setGoodsIdx] = useState(0);
    const orderStatus = useSelector(getPaymentOrderStatus);
    const { startPayingOrder } = usePaymentActions()
    const recommendIdx = goods.findIndex(g => g.recommend == 1);
    const recommendPrices = goods[recommendIdx > -1 ? recommendIdx : 0]?.favorable_price;
    const onGoodsClick = (idx) => {
        if (!goods[idx]) {
            setAmount(0);
        } else {
            setGoodsIdx(idx);
            setAmount(goods[idx].favorable_price);
            onSelect && onSelect(idx);
        }

    }

    const onPayment = () => {
        // adjust 点击充值按钮
        if (global.enterRechargeType == 0) {
            global.tracker.trackEvent("click_recharge", [{key: "enterPayType", value: global.enterRechargeType}]);
            global.tracker.trackEvent("click_recharge_count");
        } else if (global.enterRechargeType == 1) {
            global.tracker.trackEvent("click_recharge_first_pay", [{key: "enterPayType", value: global.enterRechargeType}]);
            global.tracker.trackEvent("click_recharge_first_paycount");
        } else if (global.enterRechargeType == 2) {
            global.tracker.trackEvent("click_recharge_vip_hint", [{key: "enterPayType", value: global.enterRechargeType}]);
            global.tracker.trackEvent("click_recharge_vip_hint_count");
        }

        if(isFrequentTap("WRcharge_StartPayment")) return;
        const item = goods[goodsIdx];
        startPayingOrder({
            price: item.favorable_price,
            goodsName: goodsName,
            GiftsID: giftId,
            gear: item.gear,
        })
    }

    const renderMarquee = (item, index) => {
        return (
            <div className={styles.marquee}>
                {item.messages}
                <span className={`${styles.lbl_money}`}>{` $ ${recommendPrices}`}</span>
            </div>
        )
    }

    const renderItemBonus = (item) => {
        const num = Math.floor(item.give * 100 / item.favorable_price);
        if (Number.isNaN(num) || num == 0) return <></>
        return <div className={styles.bonus}>+ {num}% Bouns</div>
    }

    useEffect(() => {
        onGoodsClick(recommendIdx);
    }, []);

    return (
        <div className={styles.container}>
            <div className={styles.title}>
                {i18n.t("deposit.recharge.title")}
                {
                    recommendIdx === goodsIdx ? <div className={styles.tips}>
                        {i18n.t("deposit.recharge.recommand")}
                        <LazyImage className={styles.image} src={likeImg} alt={'recommend'}></LazyImage>
                    </div> : <div className={styles.tips}>

                    </div>
                }
            </div>

            <div className={styles.amount_box}>
                <div className={styles.money}>$</div>
                <div>{amoun}</div>
            </div>

            <div className={styles.grids}>
                {goods.map((item, index) => (
                    <div key={`recharge_grid_${index}`} className={`${styles.item}  ${goodsIdx === index ? styles.active : ""}`}
                        onClick={() => { onGoodsClick(index) }}>
                        <div className={styles.item_amount}>
                            <div className={styles.item_amount_money}>$</div>
                            <div>{item.money}</div>
                        </div>
                        {
                            renderItemBonus(item)
                        }
                        {
                            (item.recommend == 1) && <LazyImage className={styles.flag} src={likeImg} alt={`${item.money}`}></LazyImage>
                        }
                    </div>
                ))}
            </div>

            <button className={styles.button} onClick={onPayment}>
                {
                    orderStatus === REQ_STATUS.LOADING ? <SmallLoading fill={"#fff"} /> : i18n.t("deposit.recharge.button")
                }
            </button>

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

            <WMarqueeVertical messages={DepositUsers} renderChild={renderMarquee} />
        </div>
    )
}


export default WRecharge;