import styles from './styles.module.scss';
import Spring from "@components/Spring";
import React, {useEffect} from "react";
import new_icon from "@assets/promotion/new.png";
import {useNavigate} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import {getRedPackInfo} from "@features/redpackSlice";
import {formatTime} from "@utils/helpers";
import {reqGameActivity, reqRedpackCheck} from "@features/api";
import {getTurnplate} from "@features/turnplateSlice";
import {getActivityList, getActivityStatus} from "@features/activitySlice";
import LazyImgix from "@components/Imgix/LazyImgix";
import {getBonusList} from "@features/agentSlice";
import clock from "@assets/promotion/clock.json";
import Lottie from "lottie-react";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
const WPromotion=({close})=>{
    const navigate=useNavigate();
    const redpack=useSelector(getRedPackInfo);
    const turnplate=useSelector(getTurnplate);
    const agentBonus=useSelector(getBonusList);
    const dispatch=useDispatch();
    const data=useSelector(getActivityList);
    const status=useSelector(getActivityStatus);
    // 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(()=>{
        if (data==null||data.length===0){
            dispatch(reqGameActivity())
        }
        dispatch(reqRedpackCheck());
    },[])
    const checkDot=(item)=>{
        if (item.id===1){
            if (turnplate&&turnplate.times>0){
                return true;
            }
        }
        else if (item.id===2){
            if (agentBonus&&agentBonus.length>0){
                return true;
            }
        }
        else if (item.id===3){
            if (redpack&&redpack.status===1){
                return true;
            }
        }
        return false;
    }
    // const checkRender
    const checkRenderLeft=(item)=>{
        if (item.id===3){}
        return (
            <></>
        )
    }
    const checkRenderCD=(item)=>{
        if (redpack==null)return (<></>);
        let status=redpack.status;
        if (status!==0)return (<></>);
        let cdLeft=redpack.next_in_seconds;
        let cdLeftStr=formatTime(cdLeft);
        return (
            <div className={styles.item_right}>
                <div className={styles.clock_item}>
                    {cdLeftStr}
                    <Lottie animationData={clock} className={styles.clock_icon} />
                </div>
            </div>
        )
    }
    const checkRenderRight=(item)=>{
        let isdot=checkDot(item);
        if (isdot){
            return (
                <div className={styles.item_right}>
                    <img src={new_icon} className={`${styles.act_new} iconshake`}/>
                </div>
            )
        }
        else {
            if (item.id===3){
                return checkRenderCD(item);
            }
        }
        return (
            <></>
        )
    }
    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>
        //     </>
        // )
        return (
            <>
                <LazyImgix src={item.img} alt={item.title} className={styles.banner} width={1350}></LazyImgix>
                <div className={styles.item_content}>
                    {checkRenderLeft(item)}
                    {checkRenderRight(item)}
                </div>
            </>
        )
    }
    const renderList = () => {
        return (
            <>
                {
                    data.map((item, index) => {
                        return (
                            <button key={index} className={styles.act_item} onClick={()=>{
                                navigate(item.link);
                            }}>
                                {renderItem(item)}
                            </button>
                        )
                    })
                }
            </>
        )
    }
    return (
        <div className={styles.container}>
            {
                status===REQ_STATUS.LOADING?(<SmallLoading></SmallLoading>):(
                    <Spring type="slideUp" className={styles.content}>
                        {renderList()}
                    </Spring>
                )
            }
        </div>
    )
}
export default WPromotion;
