import ScrollToTop from "@components/ScrollToTop";
import Sidebar from "@layout/Sidebar";
import Navbar from "@layout/Navbar";
import BottomNav from "@layout/BottomNav";
import AppContainer from "@layout/AppContainer";
import React, {cloneElement, createRef, lazy, Suspense, useEffect, useRef, useState} from "react";
import LoadingScreen from "@components/LoadingScreen";
import {Route, Routes, useLocation, useNavigate} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import {isFullRoute, isLogined, routesIn, routesPop, updateGameRoute} from "@features/mainSlice";
import {preventDefault} from "@utils/helpers";
import {useThemeProvider} from "@contexts/themeContext";
import CRoute from "@layout/Routes";
import {CBrowserRouter,CHashRouter} from "@layout/Routes";
import Footer from "@layout/Footer";
import GameSearchPanel from "@layout/GameSearchPanel";
import TransitionGroup from "react-transition-group/TransitionGroup";
import SubScreen from "@components/SubScreen";
import CSSTransition from "react-transition-group/CSSTransition";
import Transition from "react-transition-group/Transition";
import WLangSelect from "@widgets/WLangSelect";
import MsgBox from "@components/MsgBox";
import WDPassPrompt from "@widgets/WWithdraw/PassPrompt/WDPassPrompt";
import useAuthLockRoute from "@hooks/useAuthLockRoute";
import WHallWheel from "@widgets/WCashWheel/WHallWheel/WHallWheel";
import LoadingIn from "@components/Loading/LoadingIn";
import WDPassBox from "@widgets/WWithdraw/PassBox/WDPassBox";
import {ROUTE_PATH, ROUTE_TYPE_FULL, ROUTE_TYPE_IN} from "@constants/routes";
import DropCoins from "@components/DropCoins";
import {toast} from "react-toastify";
import useEdgeGesture from "@hooks/useEdgeGesture";
import MailNew from "@components/MailNew";
import WInstallBox from "@widgets/WInstallBox";
import WBindPhone from "@widgets/WBindPhone";
import WBindPrompt from "@widgets/WBindPrompt";
const PageNotFound = lazy(() => import('@pages/PageNotFound'));

const Layout=({...props})=>{
    const appRef = useRef(null);
    const msgBoxRef=useRef(null);
    const {isMobile,isShowWheel, setIsShowWheel,isShowWDPassBox,setIsShowWDPassBox,isOpenSub} = useThemeProvider();
    const {pathname, search, hash} = useLocation();
    const isFull = useSelector(isFullRoute(pathname));
    const inRoutes=useSelector(routesIn);
    const popRoutes=useSelector(routesPop);
    const isLogin=useSelector(isLogined);
    const navigate=useNavigate();
    const {getSidedGesture}=useEdgeGesture();
    const isGesture=getSidedGesture();
    const mobile=isMobile();
    const dispatch = useDispatch();
    // const {setLockPath}=useAuthLockRoute();
    useEffect(() => {
        // scroll to top on route change
        appRef.current && appRef.current.scrollTo(0, 0);
        preventDefault();
    }, []);
    useEffect(()=>{
        global.msgBox=msgBoxRef.current;
    },[msgBoxRef])
    useEffect(()=>{
        let routeType=ROUTE_TYPE_FULL;
        if (!mobile)routeType=ROUTE_TYPE_IN;
        dispatch(updateGameRoute(routeType));
    },[mobile])
    const renderIn=()=>{
        let isShowSub=false;
        if (isMobile()&&isOpenSub)isShowSub=true;
        if (hash==null||hash==="")isShowSub=false;
        return (
            <>
                <div className={`app ${isShowSub ? 'app_openSub' : ''} ${isGesture?'app_gestureSub':''}`} ref={appRef}>
                    <ScrollToTop/>
                    <AppContainer>
                        <div className="app_container-content d-flex flex-column flex-1">
                            <Suspense fallback={<LoadingIn/>}>
                                <CBrowserRouter isLogin={isLogin} routes={inRoutes}/>
                            </Suspense>
                        </div>
                        <Footer/>
                    </AppContainer>
                    <GameSearchPanel/>
                </div>
                <div className={`app-top  ${isShowSub ? 'app_openSub' : ''} ${isGesture?'app_gestureSub':''}`}>
                    <Sidebar/>
                    <Navbar/>
                    {isMobile() && <BottomNav/>}
                </div>
            </>
        )
    }
    const renderInFull = () => {
        return (
            <div className={`app fluid`} ref={appRef}>
                <ScrollToTop/>
                <div className="app_container_full">
                    <Suspense fallback={<LoadingScreen/>}>
                        <CBrowserRouter isLogin={isLogin} routes={inRoutes}/>
                    </Suspense>
                </div>
            </div>
        )
    }
    const renderHash = () => {
        return (
            <CHashRouter isLogin={isLogin} routes={popRoutes} hlocation={{
                pathname: pathname,
                search: search,
                hash: hash
            }} basePath={pathname}/>
        )
    }
    const renderPop=()=>{
        return (
            <>
                <WLangSelect/>
                <MsgBox ref={msgBoxRef}/>
                <WDPassPrompt/>
                <WDPassBox open={isShowWDPassBox} onClose={()=>{
                    setIsShowWDPassBox(false);
                }}/>
                <WHallWheel open={isShowWheel} onClose={()=>{
                    setIsShowWheel(false);
                    if (props&&props.onCloseHallWheel)props.onCloseHallWheel()
                }}></WHallWheel>
                {/*<WInstallBox/>*/}
                <WBindPhone/>
                <WBindPrompt/>
            </>
        )
    }
    const renderEffect=()=>{
        return (
            <>
                <DropCoins/>
                <MailNew/>
            </>
        )
    }
    return (
      <>
          {
              !isFull?renderIn():renderInFull()
          }
          {
              // hash!=''?renderHash():(<></>)
              renderHash()
          }
          {
              renderPop()
          }
          {
              renderEffect()
          }
      </>
    );
}
export default Layout;