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

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

const SSOForm = React.lazy(() => import("../SSOForm"));
const FileUploadForm = React.lazy(() => import("../FileUploadForm"));
const PageNotFound = React.lazy(() => import("../404"));

const SiteRoutes = () => {
  const { token } = useUserContext();
  return (
    <Suspense fallback={"Loading..."}>
      <MessageBar />
      <BrowserRouter>
        <Switch>
          <AuthRoute
            path="/"
            exact
            render={() => <SSOForm />}
            type={TYPES.GUEST}
            token={token}
          />
          <AuthRoute
            path="/home"
            render={() => <FileUploadForm />}
            type={TYPES.PROTECTED}
            token={token}
          />
          <PageNotFound />
        </Switch>
      </BrowserRouter>
    </Suspense>
  );
};

export default SiteRoutes;