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";

const RouteContainer=(props)=>{
    const { children, route,open} = props;
    const navigate = useNavigate()
    const {isMobile} = useThemeProvider();
    const renderIn=()=>{
        return (
            <>
                {children}
            </>
        );
    }
    const renderPop=()=>{
        return(
            <Popup {...props} popupClass={`${isMobile()?'':'popup-big'}`}>
                {children}
            </Popup>
        )
    }
    const renderSub=()=>{
        return (
                <SubScreen {...props}>
                    {children}
                </SubScreen>
        )
    }
    const renderPopOrFull=()=>{
        return (
            <>
                {
                    isMobile()?renderSub():renderPop()
                }
            </>
        )
    }
    const renderCustom=()=>{
        return (
            <>
                {children}
            </>
        );
    }
    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;