import React from "react";
import { Page } from "@patternfly/react-core";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import { Header } from "./PageHeader";
import { PageNav } from "./PageNav";
import { Help } from "./components/help-enabler/HelpHeader";

import { RealmContextProvider } from "./context/realm-context/RealmContext";
import { WhoAmIContextProvider } from "./context/whoami/WhoAmI";
import { AlertProvider } from "./components/alert/Alerts";
import { routes } from "./route-config";
import { PageBreadCrumbs } from "./components/bread-crumb/PageBreadCrumbs";

export const App = () => {
  return (
    <Router>
      <WhoAmIContextProvider>
        <RealmContextProvider>
          <Help>
            <AlertProvider>
              <Page
                header={<Header />}
                isManagedSidebar
                sidebar={<PageNav />}
                breadcrumb={<PageBreadCrumbs />}
              >
                <Switch>
                  {routes(() => {}).map((route, i) => (
                    <Route key={i} {...route} exact />
                  ))}
                </Switch>
              </Page>
            </AlertProvider>
          </Help>
        </RealmContextProvider>
      </WhoAmIContextProvider>
    </Router>
  );
};