import { Suspense, lazy, ElementType } from 'react';
import { Navigate, useRoutes, useLocation } from 'react-router-dom';
// layouts
import DashboardLayout from '../layouts/dashboard';
import LogoOnlyLayout from '../layouts/LogoOnlyLayout';
// components
import LoadingScreen from '../components/LoadingScreen';
import GuestGuard from '../guards/GuestGuard';
import { AuthProvider } from '../contexts/LaravelAuthContext';
import AuthGuard from '../guards/AuthGuard';

// ----------------------------------------------------------------------

const Loadable = (Component: ElementType) => (props: any) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const { pathname } = useLocation();

  return (
    <Suspense fallback={<LoadingScreen isDashboard={pathname.includes('/dashboard')} />}>
      <Component {...props} />
    </Suspense>
  );
};

export default function Router() {
  return useRoutes([
    {
      path: 'auth',
      children: [
        {
          path: 'login',
          element: (
            <AuthProvider>
              <GuestGuard>
                <Login />
              </GuestGuard>
            </AuthProvider>
          ),
        },
        {
          path: 'verify-code',
          element: (
            <AuthProvider>
              <GuestGuard>
                <VerifyCode />
              </GuestGuard>
            </AuthProvider>
          ),
        },
        // { path: 'login-unprotected', element: <Login /> },
        // { path: 'register-unprotected', element: <Register /> },
        // { path: 'reset-password', element: <ResetPassword /> },
      ],
    },
    {
      path: '/',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        { element: <Navigate to="/dashboard" replace />, index: true },
        {
          path: 'dashboard',
          element: <Dashboard />,
        },
      ],
    },
    {
      path: '/alarm-center',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        {
          element: <AlarmCenter />,
          index: true,
        },
        {
          path: 'service-monitoring/:id',
          element: <AlarmCenterServiceMonitoring />,
        },
      ],
    },
    {
      path: '*',
      element: <LogoOnlyLayout />,
      children: [
        { path: '404', element: <NotFound /> },
        { path: '*', element: <Navigate to="/404" replace /> },
      ],
    },
    { path: '*', element: <Navigate to="/404" replace /> },
  ]);
}

// Auth
const Login = Loadable(lazy(() => import('../pages/auth/Login')));
const VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode')));

// Dashboard
const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard')));
const NotFound = Loadable(lazy(() => import('../pages/Page404')));

// Alarm Center
const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
const AlarmCenterServiceMonitoring = Loadable(
  lazy(() => import('../pages/AlarmCenter/ServiceMonitoring'))
);