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";

import bannerSignIn from "@assets/bonus/bannerSignIn.webp";
import bannerDole from "@assets/bonus/bannerDole.webp";
import bannerBindPhone from "@assets/bonus/bannerBindPhone.webp";
import { getIsBindPhone, getIsGuest } from '@features/mainSlice';

const WBonus = ({ 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);
    // console.error("data:", data);
    const isBind = useSelector(getIsBindPhone);

    let data = [
        {
            "id": 1,
            "order": 0,
            "title": "Daily Bonus Up To",
            //new add
            "content": "$1.5+",
            "link_game": 0,
            "link_module": "",
            "state": 127,
            img: bannerSignIn,
            link: "",
            target: "showCheckIn",
            status: true
        },
        {
            "id": 2,
            "order": 0,
            "title": "Rescue Bonus Daily",
            //new add
            "content": "3 TIMES",
            "link_game": 0,
            "link_module": "",
            "state": 127,
            img: bannerDole,
            link: "",
            target: "showProtectReward",
            status: true
        },
        {
            "id": 3,
            "order": 0,
            "title": "Bind Phone to Get",
            //new add
            "content": "$5",
            "link_game": 0,
            "link_module": "",
            "state": 127,
            img: bannerBindPhone,
            link: "",
            target: "showBindPhone",
            status: !isBind
        },
    ];
    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) => {
        return (
            <>
                {/* <LazyImgix src={item.img} alt={item.title} className={styles.banner} width={1350}></LazyImgix> */}
                <img src={item.img} alt="" className={styles.banner} />

                <div className={styles.title}>{item.title}</div>
                <div className={styles.desc}>{item.content}</div>
            </>
        );
    };
    const handleClickItem = (link, target) => {
        if (link) {
            navigate(link);
        } else if (target) {
            global[target] && global[target]();
        }
    };
    const renderList = () => {
        return (
            <>
                {
                    data.map((item, index) => {
                        if(!item.status) return <></>;
                        return (
                            <button key={index} className={styles.act_item} onClick={() => handleClickItem(item.link, item.target)}>
                                {renderItem(item)}
                            </button>
                        );
                    })
                }
            </>
        );
    };
    return (
        <div className={styles.container}>
            <div className={styles.topArea}>
                <div className={styles.header}>
                    Bonus
                </div>
            </div>
            <div className={styles.centerArea}>
                {
                    status === REQ_STATUS.LOADING ? (<SmallLoading></SmallLoading>) : (
                        <Spring type="slideUp" className={styles.content}>
                            {renderList()}
                        </Spring>
                    )
                }
            </div>
        </div>
    );
};
export default WBonus;
