import React from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, HashRouter, Routes, Route, convertData, flatArr, type IRoute } from '@aniyajs/plugin-router'
import * as pages from './imports'
import renderRoute from './renderRoutes'
import config from '<%= configFile %>'

<% if (haveRedux) { %>
import { Provider } from 'react-redux'
import { store } from '../plugin-tooltik/redux'
<% } %>

const root = createRoot(document.getElementById('root') as Element)

const { routes = [], basename = '/', hash = false } = config

let newBasename = basename?.endsWith('/')
  ? basename
  : `${basename}/`

console.log(newBasename)

newBasename = newBasename?.startsWith('.') ? '/' : newBasename

let nums = 0
const routers = flatArr<IRoute>({
  initArr: routes ?? [],
  childrenField: 'routes',
})?.map(route => {
  if (route?.component) {
    nums++
    return {
      ...route,
      component: (pages as any)[`Demo${nums}`],
    }
  }

  return route
})

const convertRouters = convertData({ initArr: routers })

const routerRender = (children: React.ReactNode, basename: string) => (
  hash ? <HashRouter>{children}</HashRouter> : <BrowserRouter>{children}</BrowserRouter>
)

root.render(
  <% if (haveRedux) { %><Provider store={store}><% } %>
    {routerRender(
      <Routes>
        {convertRouters?.map((route, i) => renderRoute({ route, key: i, convertRouters, routers }))}
        {convertRouters[convertRouters.length - 1].component &&
          !convertRouters[convertRouters.length - 1].path &&
          !convertRouters[convertRouters.length - 1].children ? (
          <Route
            path='*'
            Component={convertRouters[convertRouters.length - 1].component}
          ></Route>
        ) : null}
      </Routes>,
      newBasename
    )}
  <% if (haveRedux) { %></Provider><% } %>
)