import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import styles from "./styles.module.scss";
import {useEffect, useState} from "react";
import Grow from "@mui/material/Grow";
import closeImg from '@assets/checkIn/com_tanc_X.png';
import {useDispatch, useSelector} from "react-redux";
import {getCheckInData, getCheckInStatus, getNextGetTime} from "@features/checkInSlice";
import {useNavigate} from "react-router-dom";
import {ROUTE_PATH} from "@constants/routes";
import {reqCheckinCheck, reqCheckinGet, reqRedpackCheck} from "@features/api";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
import {formatTime} from "@utils/helpers";
const i18n=global.i18n;
const imgList={
    1:{
        src:require("@assets/checkIn/1.png"),
        height:"3.2rem"
    },
    2:{
        src:require("@assets/checkIn/1.png"),
        height:"3.2rem"
    },
    3:{
        src:require("@assets/checkIn/2.png"),
        height:"3.6rem"
    },
    4:{
        src:require("@assets/checkIn/3.png"),
        height:"3.9rem"
    },
    5:{
        src:require("@assets/checkIn/3.png"),
        height:"3.9rem"
    },
    6:{
        src:require("@assets/checkIn/4.png"),
        height:"4.3rem"
    },
    7:{
        src:require("@assets/checkIn/5.png"),
        height:"3.7rem"
    }
}
const objInfo={
    timer:null
}
const WCheckIn = ({close}) => {
    const [open,setOpen]=useState(true);
    const checkInData=useSelector(getCheckInData);
    const status=useSelector(getCheckInStatus);
    const navigate=useNavigate();
    const dispatch=useDispatch();
    const NextGetTime=useSelector(getNextGetTime);
    const [leftTime,setLeftTime]=useState(0);
    const resetTimer=()=>{
        if (objInfo.timer!=null){
            clearInterval(objInfo.timer);
            objInfo.timer=null;
        }
    }
    useEffect(()=>{
        // dispatch(reqCheckinCheck());
        if (checkInData.RewardDay==null||checkInData.RewardDay.length===0){
            dispatch(reqCheckinCheck());
        }
        return ()=>{
            resetTimer();
        }
    },[]);
    useEffect(()=>{
        resetTimer();
        let now=Date.now();
        let left=NextGetTime-now;
        if (left>0){
            setLeftTime(left);
            objInfo.timer=setInterval(()=>{
                now=Date.now();
                left=NextGetTime-now;
                if (left<=0){
                    left=0;
                    dispatch(reqCheckinCheck());
                    resetTimer();
                }
                setLeftTime(left);
            },1000);
        }
    },[NextGetTime])
    const onClose=()=>{
        setOpen(false);
        if(close)close();
    }
    const onOpenPay=()=>{
        navigate("/"+ROUTE_PATH.PAY,{replace:true})
    }
    const onCheckInCB=(payload)=>{
        if (payload&&payload.code===200){
            global.showDropCoins();
            close();
        }
        // else if (payload&&payload.code===301)
        // {
        //     let data={
        //         content:i18n.t("CheckIn.must_recharge"),
        //         sureLabel:i18n.t("CheckIn.btn_to_recharge"),
        //         sureCB:onOpenPay,
        //     }
        //     global.msgBoxShow(data)
        // }
    }
    const onCheckIn=(cashNum)=>{
        if (status.CheckInGet===REQ_STATUS.LOADING)return;
        if (leftTime>0)return;
        dispatch(reqCheckinGet({
            cashNum:cashNum,
            callback:onCheckInCB
        }));
    }
    const renderBonusList=()=>{
        let RewardDay=checkInData.RewardDay;
        if(RewardDay==null)RewardDay=[];
        let rowData=[
            RewardDay.slice(0,4),
            RewardDay.slice(4,7),
        ]
        let nDayNumber=checkInData.NextDayNumber;
        nDayNumber=nDayNumber-1;
        if (nDayNumber>7)nDayNumber=7;
        let cbRecord=checkInData.cbRecord;
        let itemIndex=0;
        return (
            <div className={styles.list_con}>
                {
                    rowData.map((rowList,rindex)=>{
                        return (
                            <div key={rindex} className={styles.item_con}>
                                {
                                    rowList.map((item,index)=>{
                                        let isDone=cbRecord[itemIndex];
                                        itemIndex++;
                                        return (
                                            <div key={index} className={`${styles.item} ${styles['item_'+item]}`}>
                                                <button className={`${styles.item_bg} ${nDayNumber===item?styles.item_bg_today:''} ${isDone===1?styles.item_bg_recived:''}`}>
                                                    <span className={styles.title}>{i18n.t("CheckIn.day"+item)}</span>
                                                    <div className={styles.img_con}>
                                                        <img src={imgList[item].src} style={{height:imgList[item].height,width:"auto"}}/>
                                                    </div>
                                                </button>
                                                {
                                                    isDone===1? (
                                                        <div className={styles.item_checked}>
                                                            <img src={require("@assets/checkIn/img_sure.png")}/>
                                                        </div>
                                                    ):(<></>)
                                                }
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        )
                    })
                }
            </div>
        )
    }
    const renderButtons=()=>{
        let nDayNumber=checkInData.NextDayNumber;
        if (nDayNumber>7)nDayNumber=7;
        let RewardScore=checkInData.RewardScore;
        let cashNum=RewardScore[nDayNumber-1];
        return (
            <div className={styles.buttons_con}>
                <button className={`${styles.btn_base} ${styles.btn_blue}`} onClick={onOpenPay}>
                    <span className={styles.text_con}>
                        {i18n.t("CheckIn.getMore")}
                    </span>
                </button>
                <button className={`${styles.btn_base} ${styles.btn_yellow}`} onClick={()=>{
                    onCheckIn(cashNum);
                }}>
                    <img src={require("@assets/checkIn/img_jinbi.png")} className={styles.img_coin}/>
                    {
                        status.CheckInGet===REQ_STATUS.LOADING?(<SmallLoading fill={"#FFF"}></SmallLoading>): (
                            <>
                                {
                                    leftTime<=0? (
                                        <div className={styles.text_take}>
                                            {i18n.t("CheckIn.take")}
                                            <span>{global.DOLLAR + cashNum}</span>
                                        </div>
                                    ):(
                                        <div className={styles.text_left}>
                                            <span className={styles.left_title}>{i18n.t("CheckIn.last_get")}</span>
                                            <span className={styles.left_timer}>{formatTime(leftTime,true)}</span>
                                        </div>
                                    )
                                }
                            </>
                        )
                    }
                </button>
            </div>
        )
    }
    const renderMain = () => {
        let RewardDay = checkInData.RewardDay;
        let isLoading=!(RewardDay!=null&&RewardDay.length>0);
        return (
            <Grow in={open} timeout={500}>
            <div className={styles.check_con}>
                    <div className={styles.title_con}>
                        {i18n.t("CheckIn.title")}
                        <button className={styles.close} onClick={onClose}>
                            <img src={closeImg} alt="close"/>
                        </button>
                    </div>
                    <div className={styles.content_con}>
                        {
                            isLoading?(<SmallLoading fill={"#fff"}></SmallLoading>):(
                                <>
                                    {renderBonusList()}
                                    {renderButtons()}
                                </>
                            )
                        }

                    </div>
                </div>
            </Grow>
        )
    }
    return (
        <>
            <Modal open={open} onClose={onClose} closeAfterTransition>
                <Fade in={open} timeout={500}>
                    <div className={styles.container}>
                        <div className={styles.content}>
                            {renderMain()}
                        </div>
                    </div>
                </Fade>
            </Modal>
        </>
    )
}
export default WCheckIn;