import React, {useMemo, useState, useEffect, useRef} from 'react';
import Popup from "@components/Popup";
import { useNavigate } from 'react-router-dom';
import {ROUTE_TYPE_FULL, ROUTE_TYPE_IN, ROUTE_TYPE_POP, ROUTE_TYPE_POP_OR_FULL} from "@constants/routes";
import {useThemeProvider} from "@contexts/themeContext";
import SubScreen from "@components/SubScreen";
import useScrollLock from "@hooks/useScrollLock";
import {useLocation} from "react-router";
const i18n=global.i18n;
const RouteWrapper = (props) => {
    const {isMobile} = useThemeProvider();
    const { Comp, route} = props;
    const navigate = useNavigate()
    const {pathname,hash} = useLocation();
    const setLock=(isLocked)=>{
        if (isLocked) {
            document.documentElement.classList.add('no-scroll');
        } else {
            document.documentElement.classList.remove('no-scroll');
        }
    }
    useEffect(() => {
        if (route){
            if (route.type===ROUTE_TYPE_IN||route.type===ROUTE_TYPE_FULL)setLock(false);
            else setLock(true);
        }
    }, [pathname,hash]);
    /** useMemo 缓存query，避免每次生成生的query */
    const renderIn=()=>{
        let isexit=false;
        if (Comp!=null)isexit=true;
        return (
            <>
                {
                    isexit?<Comp pageID={route.id} {...props} />:<></>
                }
            </>
        );
    }
    const handleClose = () => {
        navigate(-1);
    }
    const renderPop=()=>{
        let comp=(<></>);
        // if (Comp!=null)comp=Comp;
        if (Comp!=null)comp=<Comp pageID={route.id} {...props} />;
        // return(
        //     <Popup pageID={route.id} open={true} onClose={handleClose}>
        //         <div className="pop_content">
        //             {comp}
        //         </div>
        //     </Popup>
        // )
        return (
            <div className="pop_content">
                {comp}
            </div>
        )
    }
    const renderSub=()=>{
        let comp=(<></>);
        // const renderComp=(extra)=>{
        //     if (Comp!=null){
        //         return (<Comp pageID={route.id} {...extra} />)
        //     }
        //     else return (<></>);
        // }
        if (Comp!=null)comp=<Comp pageID={route.id} {...props} />;
        // return (
        //     <SubScreen  route={route} onClose={handleClose} open={true} renderComp={renderComp}>
        //         {comp}
        //     </SubScreen>
        // )
        return (
            <>
                {comp}
            </>
        )
    }
    const renderPopOrFull=()=>{
        return (
            <>
                {
                    isMobile()?renderSub():renderPop()
                }
            </>
        )
    }
    const renderComp=()=>{
        let comp=(<></>);
        if (route.type===ROUTE_TYPE_FULL||route.type===ROUTE_TYPE_IN){
            comp=renderIn();
        }
        else if (route.type===ROUTE_TYPE_POP_OR_FULL){
            comp=renderPopOrFull();
        }
        else if (route.type===ROUTE_TYPE_POP){
            comp=renderPop();
        }
        return comp;
    }
    return (
        renderComp()
    );
};

export default RouteWrapper;