import styles from './styles.module.scss'
import {useEffect, useRef} from "react";
import {useThemeProvider} from "@contexts/themeContext";
import {useSelector} from "react-redux";
import {getBBConf, getUserID, getUserInfo} from "@features/mainSlice";
import {APP_THEME} from "@constants/app";
import {useNavigate} from "react-router-dom";
import {ROUTE_PATH} from "@constants/routes";
const i18n=global.i18n;
const objInfo={
    bt:null
}
const WSport=({})=>{
    const {isMobile}=useThemeProvider();
    const bbConf=useSelector(getBBConf);
    const {theme}=useThemeProvider();
    const user=useSelector(getUserInfo);
    const userID=useSelector(getUserID);
    const language=i18n.language;
    const navigate=useNavigate();
    const initBetby=()=>{
        if (bbConf==null)return null;
        let brand_id=bbConf.id;
        let bbtheme=bbConf.theme;
        let themeIndex=0;
        if (theme===APP_THEME.LIGHT)themeIndex=1;
        let themeName=bbtheme[themeIndex];
        let token=null;
        // if (bbConf.token!=null)token=bbConf.token;
        if (user!=null&&user.bb!=null&&user.bb.token!=null)token=user.bb.token;
        // token=null;
        var bt = new window.BTRenderer().initialize({
            brand_id: brand_id,
            token: token,
            onTokenExpired: function() {},
            themeName: themeName,
            // themeName: "bc-game-dark-tile",
            lang: language,
            target: document.getElementById('betby'),
            betSlipOffsetBottom: 70,
            betSlipOffsetRight: 0,
            betSlipOffsetTop: 130,
            betslipZIndex: 100,
            onRouteChange: function() {},
            onLogin: function() {
                navigate(ROUTE_PATH.SIGN_IN);
            },
            onRegister: function() {
                navigate(ROUTE_PATH.SIGN_UP);
            },
            onRecharge:function (){
                navigate(ROUTE_PATH.PAY);
            },
            onSessionRefresh: function() {},
            onBetSlipStateChange: function() {}
        })
        return bt;
    }
    const clearBT=()=>{
        if (objInfo.bt){
            objInfo.bt.kill();
            objInfo.bt=null;
        }
    }
    useEffect(()=>{
        clearBT();
        objInfo.bt=initBetby();
        return ()=>{
            clearBT();
        }
    },[userID,theme,language])
    return (
        <div id="betby" className={`${styles.container} ${isMobile()?styles.container_m:''}`}></div>
    )
}
export default WSport;