import styles from './styles.module.scss';
import { useEffect, useState } from 'react';
import { Fade, Grow, Modal } from '@mui/material';
import SvgIcon from '@components/SvgIcon';
import { useSelector } from 'react-redux';
import { getBankRuptcyGift } from '@features/paySlice';
import usePaymentActions from '@hooks/usePaymentActions';
import ruptcyBgImf from '@assets/ruptcy_gift.png';
import { isFrequentTap } from '@utils/helpers';

const WExclusiveGift = () => {
    const [open, setOpen] = useState(false);
    const [currentIdx, setCurrentIdx] = useState(0);
    const ruptcyGift = useSelector(getBankRuptcyGift);
    const { startPayingOrder } = usePaymentActions();
    const show = () => {
        setOpen(true);
    }
    const hide = () => {
        setOpen(false);
    }

    useEffect(() => {
        const exclusiveGift = {
            show,
            hide
        };
        global.exclusiveGift = exclusiveGift;
    }, [])

    const handleDepositClick = () => {
        if (ruptcyGift == null || ruptcyGift.length == 0) return;
        if (!ruptcyGift[currentIdx]) return;
        if (isFrequentTap("wexclusive_gift_deposit")) return;
        const item = ruptcyGift[currentIdx];
        startPayingOrder({
            price: item.favorable_price,
            goodsName: "",
            GiftsID: item.gift_id,
            gear: item.gear,
        })

        hide();
    }

    const onClose = () => {
        setOpen(false);
    }

    const getTotalBonus = (item) => {
        const money = parseFloat(item.money);
        const total = parseFloat(item.total_bonus) / 100;
        return (money * total).toFixed(2);
    }

    const getCurrentMoney = () => {
        if (ruptcyGift == null || ruptcyGift.length == 0 || !ruptcyGift[currentIdx]) return "0.00";
        const item = ruptcyGift[currentIdx];
        return parseFloat(item.favorable_price).toFixed(2);
    }

    return (
        <Modal open={open} closeAfterTransition>
            <Fade in={open} timeout={500}>
                <div className={styles.container}>
                    <Grow in={open} timeout={500}>
                        <div className={styles.content}>
                            <button className="popup_close" onClick={onClose} aria-label="Close popup">
                                <i className="icon-xmark" />
                            </button>
                            <div className={styles.title}>
                                <img src={ruptcyBgImf} />
                                <span>LIMITED TIME OFFER</span>
                                <span>+10%</span>
                            </div>
                            <span>Ofertas exclusivas para usted</span>

                            <div className={styles.list}>
                                <div className={styles.l_line}>
                                    <span>Deposit</span>
                                    <span>Bonus</span>
                                    <span>Total Received</span>
                                </div>

                                {
                                    !!ruptcyGift && ruptcyGift.map((item, index) => (
                                        <div
                                            key={`ruptcyGift_${index}`}
                                            className={`${styles.l_line} ${styles.item} ${index === currentIdx ? styles.active : ""}`}
                                            onClick={() => { setCurrentIdx(index) }}
                                        >
                                            <span>${item.money}</span>
                                            <span>+{item.bonus}%</span>
                                            <span>{getTotalBonus(item)}</span>

                                            {
                                                index === currentIdx && <div className={styles.badge}>
                                                    <SvgIcon className={styles.size} herf="icon_Check" />
                                                </div>
                                            }
                                        </div>
                                    ))
                                }

                                <button onClick={handleDepositClick}>
                                    Deposit ${getCurrentMoney()}
                                </button>
                            </div>
                        </div>
                    </Grow>
                </div>
            </Fade>
        </Modal>
    )
}

export default WExclusiveGift