import styles from './styles.module.scss';
import {useEffect, useRef, useState} from "react";
import {reqFirstPayConfig, reqProtectCheck} from "@features/api";
import {useDispatch, useSelector} from "react-redux";
import {getFirstBonus, getOpenRelief, getPopBindPhone, getUserInfo} from "@features/mainSlice";
import {APP_WELFARE} from "@constants/app";
import {getCurrPayOrder, getOFirstPay} from "@features/paySlice";
import {getProtectInfo} from "@features/protectSlice";
import {formatCash} from "@utils/helpers";
import {useThemeProvider} from "@contexts/themeContext";
import {useSidebar} from "@contexts/sidebarContext";
import {useLocation} from "react-router-dom";
import {ROUTE_PATH} from "@constants/routes";
const i18n=global.i18n;
const WelfareBtn=({children,open=false,pressDown=false,...props})=>{
    const [bopen,setBopen]=useState(false);
    const [show,setShow]=useState(false);
    useEffect(()=>{
        if (open){
            setShow(true);
            setTimeout(()=>{
                setBopen(true);
            },100)
        }
        else
        {
            setBopen(false);
            setShow(false);
        }
    },[open])
    return (
        <>
            {
                show? (
                    <button
                        className={`${styles.wlf_btn} ${bopen ? styles.wlf_btn_open : styles.wlf_btn_close} ${pressDown ? styles.wlf_btn_press : ''}`}
                        {...props}
                    >
                        {
                            children == null ? (<></>) : children
                        }
                    </button>
                ):(<></>)
            }
        </>
    )
}
const WWelfarebar = () => {
    const dispatch = useDispatch();
    const user = useSelector(getUserInfo);
    //0:1,1:1,2:1
    // const [openState, setOpenState] = useState({});
    const [openProtect, setOpenProtect] = useState(0);
    const [openFirst, setOpenFirst] = useState(0);
    const [openBind, setOpenBind] = useState(0);
    const firstPayConf = useSelector(getOFirstPay);
    const popBindPhone=useSelector(getPopBindPhone);
    const firstBonus=useSelector(getFirstBonus);
    const openRelief=useSelector(getOpenRelief);
    const protectInfo=useSelector(getProtectInfo);
    const orderInfo=useSelector(getCurrPayOrder);
    const {welfTabState,isMobile}=useThemeProvider();
    const {open} = useSidebar();
    const {pathname} = useLocation();
    const starPRef=useRef(null);
    const getWelfTabState=(key)=>{
        if (welfTabState===key)return true;
        return false;
    }
    const changeNewState=(key,state)=>{
        // let newOpenState= Object.assign({},openState);
        // newOpenState[key]=state;
        // setOpenState(newOpenState);
        // state=1;
        switch (key){
            case APP_WELFARE.PROTECT:
                setOpenProtect(state);
                break;
            case APP_WELFARE.FIRST_PAY:
                setOpenFirst(state);
                break;
            case APP_WELFARE.BIND:
                setOpenBind(state);
                break;
        }
    }
    const checkProtect=()=>{
        let state=0;
        if (openRelief){
            if (protectInfo!=null){
                if (user.UserID>0){
                    // let CurProtectTimes=protectInfo.CurProtectTimes!=null?parseInt(protectInfo.CurProtectTimes):0;
                    // if (CurProtectTimes>0)state=1;
                    state=1;
                }
            }
        }
        changeNewState(APP_WELFARE.PROTECT,state);
    }
    const checkProtectLimit=()=>{
        if (protectInfo!=null){
            let ProtectLimit=protectInfo.ProtectLimit;
            if (ProtectLimit!=null){
                ProtectLimit=Number(ProtectLimit);
                ProtectLimit=Number(formatCash(ProtectLimit))
                let Score=user.Score;
                if (Score<=ProtectLimit){
                    dispatch(reqProtectCheck());
                }
            }
        }
    }
    const checkFirstPay=()=>{
        let state=0;
        if (firstBonus){
            if (user.UserID>0){
                if (firstPayConf!=null)state=1;
            }
        }
        changeNewState(APP_WELFARE.FIRST_PAY,state);
    }
    const checkFirstPayStatus=()=>{
        if (orderInfo!=null){
            if (orderInfo.status==="success"){
                dispatch(reqFirstPayConfig());
            }
        }
    }
    const checkBind=()=>{
        let state=0;
        if (popBindPhone){
            if (user.UserID>0){
                if (user.Phone==null||user.Phone===""){
                    state=1;
                }
            }
        }
        changeNewState(APP_WELFARE.BIND,state);
    }
    useEffect(()=>{
        let UserID=user.UserID;
        if (UserID>0){
            dispatch(reqProtectCheck());
            dispatch(reqFirstPayConfig());
        }
    },[user.UserID]);
    useEffect(() => {
        checkProtectLimit();
    }, [user.Score]);
    useEffect(()=>{
        checkFirstPay();
    },[firstPayConf]);
    useEffect(()=>{
        checkBind();
    },[popBindPhone,user.Phone]);
    useEffect(()=>{
        checkProtect();
    },[protectInfo])
    useEffect(()=>{
        checkFirstPayStatus();
    },[orderInfo])
    const renderBar=()=>{
        let extra='';
        if (!isMobile()){
            if (open)extra='sidebar-open';
            else extra='sidebar-close';
        }
        let isClose=false;
        if (pathname.startsWith(ROUTE_PATH.SPORTS)){
            isClose=true;
        }
        const stars=Array.from({ length: 5 }, (_, index) => index);
        return (
            <div className={`${styles.container} ${extra}`}>
                <div className={`${styles.content} ${isClose?styles.content_close:''}`}>
                    <WelfareBtn key={"protect"} open={openProtect} pressDown={getWelfTabState(APP_WELFARE.PROTECT)}
                                onClick={() => {
                                    global.showProtectReward();
                                }}>
                        <div className={styles.wlf_protect}>
                            <img src={require("@assets/welfare/fundos_" + i18n.language + ".png")}/>
                            <div ref={starPRef} className={styles.p_stars}>
                                {
                                    stars.map((item,index)=>{
                                        return (
                                            <div key={index} className={`${styles.star} ${styles['star_ani_'+index]}`}></div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </WelfareBtn>
                    <WelfareBtn key={"first_pay"} open={openFirst} pressDown={getWelfTabState(APP_WELFARE.FIRST_PAY)}
                                onClick={() => {
                                    global.showFirstPay();
                                }}>
                        <div className={styles.wlf_first}>
                            <div className={styles.wlf_first_mask} style={{
                                webkitMask:`url(${require("@assets/welfare/first.png")}) 0 0/100%`
                            }}>
                                <img className={styles.f_img} src={require("@assets/welfare/first.png")}/>
                            </div>
                            <img className={styles.f_txt} src={require("@assets/welfare/first_"+i18n.language+".png")}/>
                        </div>
                    </WelfareBtn>
                    <WelfareBtn key={"bind"} open={openBind} pressDown={getWelfTabState(APP_WELFARE.BIND)}
                                onClick={() => {
                                    global.showBindPhone();
                                }}>
                        <div className={styles.wlf_bind}>
                            <img className={`${styles.b_icon} iconshake`}
                                 src={require("@assets/welfare/veri_" + i18n.language + ".png")}/>
                            <img className={`${styles.b_txt}`}
                                 src={require("@assets/welfare/bind_txt_" + i18n.language + ".png")}/>
                        </div>
                    </WelfareBtn>
                </div>
            </div>
        )
    }
    return (
        <>
            {renderBar()}
        </>
    )
}
export default WWelfarebar;