import React from 'react';
import { Routes, Route, Outlet, useLocation } from 'react-router-dom';
import Loading from '../Loading';
const RouteCompat = Route;
/**
 * 渲染应用路由
 * @param routes
 * @param breadcrumb
 */
function RenderRouter(props) {
    const { routers, features, appName, renderLoading } = props;
    if (!routers?.length) {
        return null;
    }
    return (<>
            {routers.map((route, index) => {
            const { Component, children, namespace, namespaceKey, namespacePath, meta, isFirst, customRouter, fullPath, } = route;
            let props = {};
            if (isFirst) {
                props = {
                    index: true,
                };
            }
            else {
                props = {
                    path: route.path,
                };
            }
            return (<RouteCompat {...props} key={index} element={<Guard Component={Component} meta={meta} namespace={namespace} namespaceKey={namespaceKey} namespacePath={namespacePath} customRouter={customRouter} features={features} path={route.path} fullPath={fullPath} appName={appName} renderLoading={renderLoading}/>}>
                            {children && RenderRouter({
                    routers: children,
                    features,
                    appName,
                    renderLoading,
                })}
                        </RouteCompat>);
        })}
        </>);
}
;
const Guard = (props) => {
    const { Component, namespace, namespaceKey, namespacePath, meta, customRouter, features, fullPath, appName, renderLoading, } = props;
    const routeNamespaceForComponent = namespace || (fullPath ? namespaceKey : namespacePath) || '';
    const windowTitle = meta?.title || (meta?.titleI18nKey ? features.locales.hasKey(meta.titleI18nKey) : undefined);
    if (windowTitle) {
        window.document.title = windowTitle;
    }
    if (!Component) {
        return <Outlet />;
    }
    return (<React.Suspense fallback={renderLoading
            ? renderLoading({
                features,
                appName,
            })
            : <Loading />}>
            {/* <KeepAlive
            name={'path'}
            when={() => true}
            cacheKey={React.useId()}
        >
            <Component
                oakDisablePulldownRefresh={meta?.oakDisablePulldownRefresh}
                namespace={namespace || ''}
                customRouter={customRouter}
            />
        </KeepAlive> */}
            <Component oakDisablePulldownRefresh={meta?.oakDisablePulldownRefresh} namespace={routeNamespaceForComponent} customRouter={customRouter}/>
        </React.Suspense>);
};
const AppRouter = (props) => {
    const { routers, appName, features, renderLoading } = props;
    const location = useLocation();
    /**
     * 用于区分不同页面以进行缓存
     */
    // const cacheKey = useMemo(() => {
    //     return location.pathname + location.search;
    // }, [location]);
    // return (
    //     <KeepAlive
    //         max={25}
    //         activeName={cacheKey}
    //     >
    //         <Routes>
    //             {
    //                 RenderRouter({
    //                     routers,
    //                     features,
    //                     appName,
    //                 })
    //             }
    //         </Routes>
    //     </KeepAlive>
    // );
    return (<Routes>
            {RenderRouter({
            routers,
            features,
            appName,
            renderLoading,
        })}
        </Routes>);
};
export default AppRouter;