import { lazy, Suspense } from 'react';
import { RouteObject, useRoutes } from 'react-router-dom';
import MainLayout from '@/components/MainLayout';
import Loading from '@/components/Loading';
import RequireAuth from './components/RequireAuth';

const ProjectTemplate = lazy(() => import('@/pages/ProjectTemplate'));
const ProjectEditor = lazy(() => import('@/pages/ProjectEditor'));
const ProjectPreview = lazy(() => import('@/pages/ProjectPreview'));
const ProjectManage = lazy(() => import('@/pages/ProjectManage'));
const AssetManage = lazy(() => import('@/pages/AssetManage'));
const Invite = lazy(() => import('@root/packages/easytwin/web/src/pages/Invite'));

const routes: RouteObject[] = [
  {
    path: '/',
    element: (
      <RequireAuth>
        <MainLayout />
      </RequireAuth>
    ),
    children: [
      {
        index: true,
        element: (
          <Suspense fallback={<Loading />}>
            <ProjectManage />
          </Suspense>
        ),
      },
      {
        path: '/asset-manage',
        element: (
          <Suspense fallback={<Loading />}>
            <AssetManage />
          </Suspense>
        ),
      },
    ],
  },
  {
    path: '/project-template/:groupId',
    element: (
      <RequireAuth>
        <Suspense fallback={<Loading />}>
          <ProjectTemplate />
        </Suspense>
      </RequireAuth>
    ),
  },
  {
    path: '/project-editor/:projectId',
    element: (
      <RequireAuth>
        <Suspense fallback={<Loading />}>
          <ProjectEditor />
        </Suspense>
      </RequireAuth>
    ),
  },
  {
    path: '/project-preview/:projectId',
    element: (
      <RequireAuth>
        <Suspense fallback={<Loading />}>
          <ProjectPreview />
        </Suspense>
      </RequireAuth>
    ),
  },
  {
    path: '/invite',
    element: (
      <RequireAuth>
        <Suspense fallback={<Loading />}>
          <Invite />
        </Suspense>
      </RequireAuth>
    ),
  },
  {
    path: '*',
    element: <div>Not Found</div>,
  },
];

export default function Router() {
  const element = useRoutes(routes);

  return element;
}