import { useContext } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import StoreContext from "@qltr/store";
// Import Navbar
import Navbar from "./Navbar.jsx";
// Import Pages
import Failing from "./failing/Failing.jsx";
import Alerting from "./alerting/Alerting.jsx";
import Jobs from "./jobs/Jobs.jsx";
import Catalog from "./catalog/Catalog.jsx";
import Settings from "./settings/Settings.jsx";
import About from "./about/About.jsx";
import NotFound from "./NotFound.jsx";

export default function Views() {
  const { state: store } = useContext(StoreContext);
  return (
    <div className="view">
      <Navbar />

      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
        <Toolbar />
        <Routes>
          <Route
            exact
            path="/qualiteer/"
            element={
              <Navigate to={`/qualiteer/${store.defaultPage}`} replace />
            }
          />
          <Route
            exact
            path="/"
            element={
              <Navigate to={`/qualiteer/${store.defaultPage}`} replace />
            }
          />
          <Route path="/qualiteer/failing" element={<Failing />} />
          <Route path="/qualiteer/alerting" element={<Alerting />} />
          <Route path="/qualiteer/jobs" element={<Jobs />} />
          <Route path="/qualiteer/catalog" element={<Catalog />} />
          <Route path="/qualiteer/settings" element={<Settings />} />
          <Route path="/qualiteer/about" element={<About />} />
          <Route path="/qualiteer/404" element={<NotFound />} />
          <Route path="*" element={<Navigate to="/qualiteer/404" replace />} />
        </Routes>
      </Box>
    </div>
  );
}
