import React from 'react'
import { Route, Navigate } from '@aniyajs/plugin-router'
import { Outlet } from '@aniyajs/plugin-router'

export interface RenderRoutesPropsType {
  route: any;
  key: any;
  convertRouters: any;
  routers: any;
}

const renderRoute: React.FC<RenderRoutesPropsType> = ({ route, key, convertRouters, routers }) => {
  if (route.redirect) {
    return (
      <Route
        key={key}
        {...{ path: !route.path ? '/' : route.path }}
        element={<Navigate to={route.redirect} replace />}
      />
    )
  }

  if (route.children && route.children?.length > 0) {
    return (
      <Route
        key={key}
        {...{ path: !route.path ? '/' : route.path }}
        {...(!route.component ? {} : {
          element: (
            <route.component route={route} key={key} convertRouters={convertRouters} routers={routers}>
              <Outlet />
            </route.component>
          )
        })}
      >
        {route.children?.map((item, i) => renderRoute({ route: item, key: i, convertRouters, routers }))}
      </Route>
    )
  }

  if (!route.path) {
    return null
  }

  if (!route.component) {
    return null
  }

  return <Route key={key} path={route.path} element={<route.component />} />
}

export default renderRoute