import ScrollToTop from "@components/ScrollToTop";
import Sidebar from "@layout/Sidebar";
import Sidebar2 from "@layout/Sidebar2";
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 { getFreeWithdraw, 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";
import WWelfarebar from "@widgets/WWelfarebar";
import WProtect from "@widgets/WProtect";
import LoadingCircular from "@components/Loading/LoadingCircular";
import WFirstPay from "@widgets/WFirstPay";
import WAreaSelect from "@widgets/WAreaSelect";
import WSaveAccount from "@widgets/WSaveAccount";
import WBonusPack from "@widgets/WBonusPack";
import WDepositInfo from "@widgets/WDeposit/WPayInfo/WDepositInfo";
import WNewUserPrompt from "@widgets/WNewUserPrompt";
import WNewUserBonus from "@widgets/WNewUserBonus";
import WFirstCashoutTips from "@widgets/WFirstCashoutTips";
import WWithdrawLimit from "@widgets/WWithdrawLimit";
import WWithdrawMission from "@widgets/WWithdrawMission";
import WCheckIn from "@widgets/WCheckIn";
import WMusicSettings from "@widgets/WMusicSettings";
import TopDownload from "@widgets/TopDownload";
import WOrientation from "@widgets/WOrientation";
import { useWithdrawMission } from "@contexts/withdrawMissionContext";
import WExclusiveGift from "@widgets/WExclusiveGift";
import WComeBackBonus from "@widgets/WComeBackBonus";
import WComeBackWithdraw from "@widgets/WComeBackWithdraw";
import WRecallGift from "@widgets/WRecallGift";
import WHolidaysGift from "@widgets/WHolidaysGift";
import WRecommendedGames from "@widgets/WRecommendedGames";
import WCommonTextTip from "@widgets/WCommonTextTip";
import WHolidaysAct from "@widgets/WHolidaysAct";
import WSecurityScan from "@widgets/WInstallBox/WSecurityScan";
import WQuickInstall from "@widgets/WInstallBox/WQuickInstall";
import WDownloadPrompt from "@widgets/WInstallBox/WDownloadPrompt";
import WPopPwaBonus from "@widgets/WInstallBox/WPopPwaBonus";
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 withdrawInfo = useSelector(getFreeWithdraw);
    const { open: missionOpen, setOpen: setMissionOpen } = useWithdrawMission();
    const onClickNormalWithdraw = () => {
        // console.error("handleClick");
        if (withdrawInfo.state === 1) {
            navigate(ROUTE_PATH.FREEWITHDRAW);
        } else if (withdrawInfo.state === 2) {
            navigate(ROUTE_PATH.FREEWITHDRAW);
        } else if (withdrawInfo.state === 3) {
            setMissionOpen(true);
        } else if (withdrawInfo.state === 4) {
            setMissionOpen(true);
        } else {

        }
    };

    global.onClickNormalWithdraw = onClickNormalWithdraw;

    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 />
                    {/* <Sidebar2/> */}
                </div>
                <div className={`app-top  ${isShowSub ? 'app_openSub' : ''} ${isGesture ? 'app_gestureSub' : ''}`}>
                    <Sidebar />
                    <Navbar />
                    {isMobile() && <BottomNav />}
                    {/* <WWelfarebar /> */}
                </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 (
            <div className="app-pop">
                <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 />
                <WNewUserPrompt />
                <WNewUserBonus />
                <WBindPrompt />
                <WProtect />
                <WFirstPay />
                <WSaveAccount />
                {/* <WFirstPay/> */}
                {/* <WSaveAccount /> */}
                {/* <WBonusPack /> */}
                <WDepositInfo />
                <WFirstCashoutTips />
                <WWithdrawLimit />
                <WWithdrawMission />
                <WMusicSettings />
                <Sidebar2 />
                <WExclusiveGift />
                <WComeBackBonus />
                <WComeBackWithdraw />
                <WRecallGift />
                <WCommonTextTip />

                {
                    isLogin && <WCheckIn />
                }
                <WHolidaysGift />
                <WHolidaysAct />

                <WRecommendedGames />
                <WSecurityScan />
                <WQuickInstall/>
                <WDownloadPrompt/>
                <WPopPwaBonus/>
                {/* <WOrientation /> */}
            </div>
        );
    };
    const renderEffect = () => {
        return (
            <>
                <DropCoins />
                <MailNew />
                <LoadingCircular />
            </>
        );
    };
    const topRef = useRef(null);
    // console.error('topRef', topRef.current?.clientHeight);
    const renderTop = () => {
        return (
            <div className="appHeader" ref={topRef}>
                {/* <p>this is top area</p> */}
                <TopDownload />
            </div>
        );
    };
    const mainStyles = {
        height: `calc( 100vh - ${topRef.current ? topRef.current?.clientHeight : 0}px)`
    };
    return (
        <>
            {
                renderTop()
            }
            <div className="appMain" style={mainStyles}>
                {
                    !isFull ? renderIn() : renderInFull()
                }
                {
                    // hash!=''?renderHash():(<></>)
                    renderHash()
                }
                {
                    renderPop()
                }
                {
                    renderEffect()
                }
            </div>

        </>
    );
};
export default Layout;
