import { Route, Routes } from 'react-router-dom';

import { Loadable } from 'src/routes';
import { lazyRetry } from 'src/utils/lazyRetry';
import { ROUTE_PERMISSIONS } from 'src/utils/permissions';

const PermissionsGuard = Loadable(
  lazyRetry(() => import('src/components/guards/PermissionsGuard')),
);
const LibraryLayout = Loadable(
  lazyRetry(() => import('./components/LibraryLayout')),
);
const Libraries = Loadable(lazyRetry(() => import('./Libraries')));
const Library = Loadable(lazyRetry(() => import('./Library')));

const LegacyLibrariesRoutes = () => (
  <Routes>
    <Route element={<LibraryLayout />}>
      <Route
        index
        element={
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.KNOWLEDGE_LIBRARY}
          >
            <Libraries />
          </PermissionsGuard>
        }
      />
      <Route
        path=":id"
        element={
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.KNOWLEDGE_LIBRARY}
          >
            <Library />
          </PermissionsGuard>
        }
      />
      <Route
        path=":id/edit"
        element={
          <PermissionsGuard
            requiredPermissions={ROUTE_PERMISSIONS.KNOWLEDGE_LIBRARY}
          >
            <Library />
          </PermissionsGuard>
        }
      />
    </Route>
  </Routes>
);

export default LegacyLibrariesRoutes;
