web2468/src/contexts/themeContext.js

import {createContext, useContext, useEffect, useState} from 'react';
import {isRtlLang} from 'rtl-detect';
import {useWindowSize} from "react-use";
import {APP_THEME} from "@constants/app";
import {ROUTE_PATH} from "@constants/routes";
import {useSelector} from "react-redux";
import {getUserInfo, isLogined} from "@features/mainSlice";

const ThemeContext = createContext(undefined);

export const ThemeProvider = ({children}) => {
    const {width,height} = useWindowSize();
    const page = document.documentElement;
    const isRtl = isRtlLang(navigator.language);
    const browserTheme = window.matchMedia('(prefers-color-scheme: light)');
    const persisted = JSON.parse(localStorage.getItem('preferences') || '{}');
    const isDesktop=()=>{
        return width>=1280;
    }
    const isTablet=()=>{
        return width<1280&&width>=768;
    }
    const isMobile=()=>{
        return width<768;
    }
    const [theme, setTheme] = useState(persisted && persisted.theme ?  persisted.theme : (APP_THEME.DARK));
    // const [fontScale, setFontScale] = useState(persisted.fontScale || 1);
    const [fontScale, setFontScale] = useState(isMobile()?0.88:1);
    const [direction, setDirection] = useState(persisted.direction || (isRtl ? 'rtl' : 'ltr'));

    const [headerHeight,setHeaderHeight]=useState('64px');

    //GameSearch
    const [isShowSearch,setIsShowSearch]=useState(false);

    const [searchData,setSearchData]=useState(null);

    const [showHeader, setShowHeader] = useState(true);

    //GameSearch

    //lang select
    const [isShowLang,setIsShowLang]=useState(false);

    //show pass prompt
    const [isShowPassPrompt,setIsShowPassPrompt]=useState(false);

    const isLogin=useSelector(isLogined);
    const user=useSelector(getUserInfo);
    const initWindowSize=()=>{
        if (isMobile())global.device="mobile";
        else global.device="pc";
        global.width=width;
        global.height=height;
    }
    initWindowSize();
    const stopTransition = () => {
        page.classList.add('no-transition');
        setTimeout(() => page.classList.remove('no-transition'), 100);
    }

    const savePreferences = () => {
        localStorage.setItem('preferences', JSON.stringify({
            theme,
            fontScale,
            direction
        }));
    }

    const toggleTheme = () => {
        setTheme(theme === APP_THEME.LIGHT ? APP_THEME.DARK : APP_THEME.LIGHT);
        // stopTransition();
    }

    const changeFontScale = (scale) => {
        setFontScale(scale);
        stopTransition();
    }

    const toggleDirection = () => {
        setDirection(direction === 'ltr' ? 'rtl' : 'ltr');
        page.setAttribute('dir', direction);
    }

    const initHeaderHeight=(height)=>{
        setHeaderHeight(height);
    }

    const showGameSearchPanel=(show,data)=>{
        setIsShowSearch(show);
        setSearchData(data);
    }
    //检查提现
    const checkWithdraw=()=>{
        if (isLogin){
            if (user){
                let InsurePass=Number(user.InsurePass);
                if (InsurePass!==1){
                    setIsShowPassPrompt(true);
                    return false;
                }
            }
        }
        return true;
    }
    //检查路由是否允许跳转
    const checkRoute=(path)=>{
        if (path===ROUTE_PATH.SAQUE){
            return checkWithdraw();
        }
        return true;
    }

    useEffect(() => {

        page.style.setProperty('--font-scale', fontScale);
        // page.style.setProperty('--widget-scale', fontScale === 1 ? '0px' : `${fontScale * 3}px`);
        page.setAttribute('dir', direction);
        savePreferences();

        // window
        //     .matchMedia('(prefers-color-scheme: light)')
        //     .addEventListener('change', event => {
        //         event.matches ? setTheme('light') : setTheme('dark');
        //         stopTransition();
        //         savePreferences();
        //     })
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [theme, fontScale, direction]);

    return (
        <ThemeContext.Provider
            value={{
                theme,
                fontScale,
                direction,
                toggleTheme,
                changeFontScale,
                toggleDirection,
                isDesktop,
                isTablet,
                isMobile,
                headerHeight,
                initHeaderHeight,
                isShowSearch,
                searchData,
                showGameSearchPanel,
                showHeader,
                setShowHeader,
                //lang
                isShowLang,
                setIsShowLang,
                isShowPassPrompt,
                setIsShowPassPrompt,
                //检查路由是否允许跳转
                checkRoute
            }}>
            {children}
        </ThemeContext.Provider>
    );
}

export const useThemeProvider = () => useContext(ThemeContext);