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

import '../certificate-fonts.css';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { Loadable, lazyRetry } from 'src/lazyLoad';
import { ROUTE_PERMISSIONS } from 'src/utils/permissions';

import PermissionsGuard from 'src/components/PermissionsGuard';

const CertificatesSettings = Loadable(lazyRetry(() => import('../List')));
const CreateCertificate = Loadable(lazyRetry(() => import('../Create')));

const CertificatesRoutes = () => {
  const HuGoThemeProvider = useHuGoTheme();
  return (
    <HuGoThemeProvider>
      <Routes>
        <Route
          index
          element={
            <PermissionsGuard
              requiredPermissions={ROUTE_PERMISSIONS.LEARNING_SETTINGS}
              requireAll
            >
              <CertificatesSettings />
            </PermissionsGuard>
          }
        />
        <Route
          path="new"
          element={
            <PermissionsGuard
              requiredPermissions={ROUTE_PERMISSIONS.LEARNING_SETTINGS}
              requireAll
            >
              <CreateCertificate />
            </PermissionsGuard>
          }
        />
        <Route
          path=":id/edit"
          element={
            <PermissionsGuard
              requiredPermissions={ROUTE_PERMISSIONS.LEARNING_SETTINGS}
              requireAll
            >
              <CreateCertificate />
            </PermissionsGuard>
          }
        />
      </Routes>
    </HuGoThemeProvider>
  );
};

export default CertificatesRoutes;
