import {FC, lazy} from 'react';
import {Home, Main, Login} from '@pages';
import {
  DEPARTMENT_PATH,
  GOODS_PATH,
  HOME_PATH,
  LOGIN_PATH,
  MAIN_PATH,
  MENU_PATH,
  NO_PERMISSION_PATH,
  PDA_MENU_PATH,
  ROLE_PATH,
  STORAGE_PATH,
  USER_PATH,
} from './name';
import {RouteObject, useRoutes} from 'react-router-dom';

const NotFound = lazy(() => import(
  /* webpackChunkName: "notFoundPage" */
  /* webpackPrefetch: true */
  '@pages/not-found'
));
const Department = lazy(() => import(
  /* webpackChunkName: "departmentPage" */
  '@pages/department'
));
const Menu = lazy(() => import(/* webpackChunkName: "menuPage" */'@pages/menu'));
const Role = lazy(() => import(/* webpackChunkName: "rolePage" */'@pages/role'));
const NoPermision = lazy(() => import(
  /* webpackChunkName: "noPermissionPage" */
  /* webpackPrefetch: true */
  '@pages/no-permission'
));
const User = lazy(() => import(/* webpackChunkName: "userPage" */'@pages/user'));
const Storage = lazy(() => import(/* webpackChunkName: "storagePage" */'@pages/storage'));
const Goods = lazy(() => import(/* webpackChunkName: "goods" */'@pages/goods'));
const Pda = lazy(() => import(/* webpackChunkName: "pdaMenu" */'@pages/pda-menu'));

const routes: RouteObject[] = [
  {
    path: HOME_PATH,
    element: <Home />,
    children: [
      {path: MAIN_PATH, element: <Main />},
      {path: DEPARTMENT_PATH, element: <Department />},
      {path: MENU_PATH, element: <Menu />},
      {path: ROLE_PATH, element: <Role />},
      {path: USER_PATH, element: <User />},
      {path: STORAGE_PATH, element: <Storage />},
      {path: GOODS_PATH, element: <Goods />},
      {path: PDA_MENU_PATH, element: <Pda />},
    ],
  },
  {path: LOGIN_PATH, element: <Login />},
  {path: NO_PERMISSION_PATH, element: <NoPermision />},
  {path: '*', element: <NotFound />},
];

export const RootRoutes: FC = function() {
  const Routes = useRoutes(routes);

  return Routes;
};
