import "./App.scss";

import { Suspense, useLayoutEffect } from "react";

import { BrowserRouter } from "react-router-dom";
import Context from "./Context";
import Loader from "./Components/Loader";
import { Popups } from "./Popups";
import { Router } from "./Router";
import { WidgetLoader } from "react-cloudinary-upload-widget";
import axios from "axios";
import { createRoot } from "react-dom/client";
import { useNavigate } from "react-router-dom";

export default function App() {
  axios.defaults.headers.common["Bypass-Tunnel-Reminder"] = true;
  const navigate = useNavigate();

  useLayoutEffect(() => {
    if (window.localStorage.getItem("user") === null) {
      navigate("/");
    }
  }, [window.location.pathname]);

  return (
    <Suspense fallback={<Loader height="100vh" background="white" />}>
      <Context>
        <WidgetLoader />
        <Popups />
        <Router />
      </Context>
    </Suspense>
  );
}

createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);