import {ROUTE_TYPE_FULL, ROUTE_TYPE_IN, ROUTE_TYPE_POP, ROUTE_TYPE_POP_OR_FULL,ROUTE_TYPE_CUSTOM} from "@constants/routes";
import React, {cloneElement} from "react";
import Popup from "@components/Popup";
import SubScreen from "@components/SubScreen";
import {useNavigate} from "react-router-dom";
import {useThemeProvider} from "@contexts/themeContext";
import CSSTransition from "react-transition-group/CSSTransition";

const RouteContainer=(props)=>{
    const { children, route,open} = props;
    const navigate = useNavigate()
    const {isMobile} = useThemeProvider();
    const renderIn=()=>{
        return (
            <>
                {children}
            </>
        );
    }
    const renderPop=()=>{
        // 桌面端默认走居中 popup-big；用户信息（#/settings）改成右侧抽屉式 popup-drawer-right。
        // 注意 route 字段是 component，不是 comp；这里同时兜底用 path 判定更稳。
        const isSettings = route && (route.path === '#/settings' || route.component === 'settings');
        const desktopClass = isSettings ? 'popup-drawer-right' : 'popup-big';
        const popupClass = isMobile() ? '' : desktopClass;
        return(
            <CSSTransition {...props} timeout={500}>
                <Popup {...props} popupClass={popupClass}>
                    {children}
                </Popup>
            </CSSTransition>
        )
    }
    const renderSub=()=>{
        return (
                <SubScreen {...props}>
                    {children}
                </SubScreen>
        )
    }
    const renderPopOrFull=()=>{
        return (
            <>
                {
                    isMobile()?renderSub():renderPop()
                }
            </>
        )
    }
    const renderCustom=()=>{
        return (
            <>
                <CSSTransition {...props} timeout={500}>
                    {children}
                </CSSTransition>
            </>
        );
    }
    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();
        }
        else if (route.type===ROUTE_TYPE_CUSTOM){
            comp=renderCustom();
        }
        return comp;
    }
    return (
        renderComp()
    );
}
export default RouteContainer;