import styles from './styles.module.scss';
import Spring from "@components/Spring";
import React, {useEffect} from "react";
import icon_1 from "@assets/promotion/icon_1.svg";
import banner_1 from "@assets/promotion/banner_1.png";
import icon_2 from "@assets/promotion/icon_2.svg";
import banner_2 from "@assets/promotion/banner_2.png";
import icon_3 from "@assets/promotion/icon_3.svg";
import banner_3 from "@assets/promotion/banner_3.png";
import {useNavigate} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import {getRedPackInfo} from "@features/redpackSlice";
import {formatTime} from "@utils/helpers";
import {reqRedpackCheck} from "@features/api";
import {getTurnplate} from "@features/turnplateSlice";
const icons=[
    null,
    icon_1,
    icon_2,
    icon_3
]
const banners=[
    null,
    banner_1,
    banner_2,
    banner_3
]
const WPromotion=({close})=>{
    const navigate=useNavigate();
    const redpack=useSelector(getRedPackInfo);
    const turnplate=useSelector(getTurnplate);
    const dispatch=useDispatch();
    let data=[
        {
            id:1,
            title:"Tycoon",
            icon:"",
            banner:"",
            link:"#/cashwheel",
        },
        {
            id:2,
            title:"Collection",
            icon:"",
            banner:"",
            link:"#/moneyrain",
        },
        {
            id:3,
            title:"Agent",
            icon:"",
            banner:"",
            link:"#/agent",
        }
    ]
    useEffect(()=>{
        dispatch(reqRedpackCheck());
    },[])
    const checkRenderDot=(item)=>{
        if (item.id===1){
            if (turnplate&&turnplate.times>0){
                return (<div className={styles.red_dot}></div>)
            }
        }
        return (<></>);
    }
    const renderRedPackItem=(item)=>{
        if (redpack==null)return (<></>);
        let status=redpack.status;
        let cdLeft=redpack.next_in_seconds;
        let cdLeftStr=formatTime(cdLeft);
        return (
            <>
                <div className={styles.gift_title}>{status!==0?item.title:cdLeftStr}</div>
                <button className={styles.git_fun_item} onClick={() => {
                    navigate(item.link);
                }}>
                    <div className={styles.left}>
                        <div className={styles.icon_con}>
                            <img className={"iconshake"} src={icons[item.id]}/>
                            {
                                status===1? (<div className={styles.red_dot}></div>):(<></>)
                            }
                        </div>
                    </div>
                    <div className={styles.right}>
                        <img src={banners[item.id]}/>
                    </div>
                </button>
            </>
        )
    }
    const renderItem = (item) => {
        if (item.id === 2) return (renderRedPackItem(item));
        return (
            <>
                <div className={styles.gift_title}>{item.title}</div>
                <button className={styles.git_fun_item} onClick={() => {
                    navigate(item.link);
                }}>
                    <div className={styles.left}>
                        <div className={styles.icon_con}>
                            <img className={"iconshake"} src={icons[item.id]}/>
                            {/*<div className={styles.red_dot}></div>*/}
                            {checkRenderDot(item)}
                        </div>
                    </div>
                    <div className={styles.right}>
                        <img src={banners[item.id]}/>
                    </div>
                </button>
            </>
        )
    }
    const renderList = () => {
        return (
            <>
                {
                    data.map((item, index) => {
                        return (
                            <div key={index} className={styles.gift_item}>
                                {renderItem(item)}
                            </div>
                        )
                    })
                }
            </>
        )
    }
    return (
        <div className={styles.container}>
            <Spring type="slideUp" className={styles.content}>
                {renderList()}
            </Spring>
        </div>
    )
}
export default WPromotion;