import "./App.css";
import React, { Suspense, lazy } from "react";
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch,
} from "react-router-dom";
import { LanguageProvider } from "./component/Language/LanguageProvider";
import NavbarComponent, { navOnload, navOnresize } from "./component/Navbar";
import SidebarComponent, {
  sidebarOnload,
  sidebarOnresize,
} from "./component/Sidebar";

const Home = lazy(() => import("./routes/Home"));
const Projects = lazy(() => import("./routes/Projects"));
const Contact = lazy(() => import("./routes/Contact"));

export default function App() {
  return (
    <Router>
      <LanguageProvider>
        <NavbarComponent />
        <SidebarComponent />

        <Suspense fallback={<div></div>}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/projects" component={Projects} />
            <Route path="/contact" component={Contact} />

            <Redirect to="/" />
          </Switch>
        </Suspense>
      </LanguageProvider>
    </Router>
  );
}

window.onload = () => {
  navOnload();
  sidebarOnload();
};

window.onresize = () => {
  navOnresize();
  sidebarOnresize();
};