import { useRoutes } from 'react-router-dom'
import './App.css'
import LayOut from './layout'
import ParentView from './ParentView'
import Loading from './Loading'
import currentRouter from './router'
import RouteInterception from './router/RouteInterception'
import { useSelector } from 'react-redux'
import { Suspense, lazy, useEffect, useState } from 'react'
const Views = import.meta.glob('./view/**/*.tsx')
const transferReactNode = (comp: string) => {
  if (comp === 'Layout') {
    return <LayOut />
  } else if (comp === 'ParentView') {
    return <ParentView />
  } else {
    const View = lazy((Views[`./view/${comp}.tsx`] as any))
    return (
      <RouteInterception filePath={comp}>
        <Suspense fallback={<Loading />}>
          <View />
        </Suspense>
      </RouteInterception>
    )
  }
}

function App() {
  const routes: [] = useSelector((store: any) => store.permission)
  const [allRoutes, setAllRoutes] = useState(currentRouter)
  const element = useRoutes(allRoutes)
  // 转换路由对象
  const transferRouteObject = (routes: Array<any>) => {
    const croutes = JSON.parse(JSON.stringify(routes))
    if (croutes.length) {
      const reactRoutes = croutes.map((route: any) => {
        return {
          path: route.path,
          element: transferReactNode(route.component),
          children: transferRoutesChild(route.children)
        }
      })
      setAllRoutes([...allRoutes, ...deleteChildren(reactRoutes)])
    }
  }
  // 处理子路由
  const transferRoutesChild = (routes: Array<any>): Array<any> => {
    return routes.map(route => {
      return {
        path: route.path,
        element: transferReactNode(route.component),
        children: route.children?.length ? transferRoutesChild(route.children) : []
      }
    })
  }
  // 删除children[]
  const deleteChildren = (routes: Array<any>) => {
    return routes.filter(route => {
      if(route.children) {
        if(route.children.length) {
          deleteChildren(route.children)
        }else {
          delete route.children
        }
      }
      return true
    })
  }

  useEffect(() => {
    transferRouteObject(routes)
  }, [routes.length])

  return element
}

export default App