import * as React from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import ServerErrorPage from '../components/results/500';
import { MainLayout } from '../layouts';
import DriverLicensePage from '../views/driver-license';
import IDCardPage from '../views/id-card';
import InvoicePage from '../views/invoice';
import OtherDocumentsPage from '../views/other-documents';
import { PrivateRoute } from './guard-route';

const ConfigTemplatePage = React.lazy(() => import('../views/config-template'));
const CreateTemplatePage = React.lazy(
  () => import('../views/config-template/create-template'),
);
const TemplatePage = React.lazy(() => import('../views/template'));
const UnauthenticatedPage = React.lazy(() => import('../views/401'));

export function createRouter() {
  return createBrowserRouter([
    {
      path: '/',
      element: (
        <Navigate
          to={{
            pathname: '/invoice',
            search: location.search,
          }}
        />
      ),
    },
    {
      path: '/error/401',
      element: (
        <React.Suspense fallback="Loading ...">
          <UnauthenticatedPage />
        </React.Suspense>
      ),
    },
    {
      path: '/',
      element: <MainLayout />,
      errorElement: <ServerErrorPage />,
      children: [
        {
          path: 'invoice',
          element: <PrivateRoute element={<InvoicePage />} />,
        },
        {
          path: 'driver-license',
          element: <PrivateRoute element={<DriverLicensePage />} />,
        },
        {
          path: 'id-card',
          element: <PrivateRoute element={<IDCardPage />} />,
        },
        {
          path: 'other-documents',
          element: <PrivateRoute element={<OtherDocumentsPage />} />,
        },
        {
          path: 'template-settings',
          element: <PrivateRoute element={<ConfigTemplatePage />} />,
        },
        {
          path: 'template/create',
          element: <PrivateRoute element={<CreateTemplatePage />} />,
        },
        {
          path: 'template/edit',
          element: <PrivateRoute element={<ConfigTemplatePage />} />,
        },
        {
          path: 'template/:id',
          element: <PrivateRoute element={<TemplatePage />} />,
        },
      ],
    },
  ]);
}
