import React, { Suspense } from "react";
import { Switch } from "react-router-dom";

import { AuthRoute, TYPES } from "../Routes/AuthRoute";
import { MessageBar } from "../MessageBar";
import { useUserContext } from "../Contexts/UserContext";
import { Roles } from "../../utils/roles";

const SSOForm = React.lazy(() => import("../SSOForm"));
const Home = React.lazy(() => import("../Home"));
const FileUploadForm = React.lazy(() => import("../UpdatePackages/Create"));
const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
const PageNotFound = React.lazy(() => import("../404"));
const UpdatePackagesForm = React.lazy(() => import("../UpdatePackages/List"));
const UpdatePackageEdit = React.lazy(() => import("../UpdatePackages/Edit"));
const CarUpdatesDeploy = React.lazy(() => import("../CarUpdates/Deploy"));
const CarUpdatesStatus = React.lazy(() => import("../CarUpdates/Status"));
const CarUpdates = React.lazy(() => import("../Cars/Status"));
const VehiclesList = React.lazy(() => import("../Cars/List"));
const SendCommandBulk = React.lazy(() => import("../Cars/SendCommandBulk"));
const Dashboard = React.lazy(() => import("../Dashboard"));
const VehicleMap = React.lazy(() => import("../VehicleMap"))

const SiteRoutes = () => {
  const { token, groups } = useUserContext();
  return (
    <Suspense fallback={"Loading..."}>
      <MessageBar />
      <Switch>
        <AuthRoute
          path="/"
          exact
          render={() => <SSOForm />}
          type={TYPES.GUEST}
          token={token}
        />
        <AuthRoute
          path="/home"
          render={() => <Home />}
          type={TYPES.PROTECTED}
          token={token}
        />
        <AuthRoute
          path="/package-upload"
          render={() => <FileUploadForm />}
          type={TYPES.PROTECTED}
          token={token}
          groups={groups}
          roles={[Roles.CREATE]}
        />
        <AuthRoute
          path="/updates"
          render={() => <UpdatePackagesForm />}
          type={TYPES.PROTECTED}
          token={token}
          groups={groups}
          roles={[Roles.CREATE]}
        />
        <AuthRoute
          path="/update/:id"
          render={() => <UpdatePackageEdit />}
          type={TYPES.PROTECTED}
          token={token}
          groups={groups}
          roles={[Roles.CREATE]}
        />
        <AuthRoute
          path="/carupdate-deploy/:packageid"
          render={() => <CarUpdatesDeploy />}
          type={TYPES.PROTECTED}
          token={token}
          groups={groups}
          roles={[Roles.CREATE]}
        />
        <AuthRoute
          path="/carupdate-status/:packageid"
          render={() => <CarUpdatesStatus />}
          type={TYPES.PROTECTED}
          token={token}
          groups={groups}
          roles={[Roles.READ, Roles.CREATE]}
        />
        <AuthRoute
          path="/vehicles"
          render={() => <VehiclesList />}
          type={TYPES.PROTECTED}
          token={token}
          groups={groups}
          roles={[Roles.READ, Roles.CREATE]}
        />
        <AuthRoute
          path="/vehicle-add"
          render={() => <VehicleAddForm />}
          type={TYPES.PROTECTED}
          token={token}
          groups={groups}
          roles={[Roles.CREATE]}
        />
        <AuthRoute
          path="/vehicle-status/:vin"
          render={() => <CarUpdates />}
          type={TYPES.PROTECTED}
          token={token}
          groups={groups}
          roles={[Roles.READ, Roles.CREATE]}
        />
        <AuthRoute
          path="/vehicles-command"
          render={() => <SendCommandBulk />}
          type={TYPES.PROTECTED}
          token={token}
          groups={groups}
          roles={[Roles.CREATE]}
        />
        <AuthRoute
          path="/dashboard"
          render={() => <Dashboard />}
          type={TYPES.PROTECTED}
          token={token}
          groups={groups}
          roles={[Roles.READ, Roles.CREATE]}
        />
        <PageNotFound />
      </Switch>
    </Suspense>
  );
};

export default SiteRoutes;