/**
 * @file App.js
 * @author Radim Buráň (xburan03@stud.fit.vutbr.cz)
 */

import './App.css';
import Header from "./components/Header";
import {Route, Routes} from "react-router-dom";
import Register from "./pages/auth/Register";
import {ProvideUserAuth} from "./services/AuthMiddleware";
import Login from "./pages/auth/Login";
import DevicesPage from "./pages/devices/DevicesPage";
import AuthRequired from "./components/AuthRequired";
import ProfilePage from "./pages/auth/ProfilePage";
import {createTheme, CssBaseline, ThemeProvider} from "@mui/material";
import {green} from "@mui/material/colors";
import DeviceDetailPage from "./pages/devices/DeviceDetailPage";
import PublicPresetsPage from "./pages/presets/PublicPresetsPage";
import PublicPresetDetailPage from "./pages/presets/PublicPresetDetailPage";
import useMediaQuery from '@mui/material/useMediaQuery';
import {useMemo} from "react";
import {LocalizationProvider} from "@mui/x-date-pickers";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
import Homepage from "./pages/Homepage";
import Footer from "./components/Footer";

function App() {
    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

    const theme = useMemo(
        () =>
            createTheme({
                palette: {
                    primary: {
                        main: green["500"],
                    },
                    mode: "light",
                },
            }),
        [prefersDarkMode],
    );

  return (
      <ThemeProvider theme={theme}>
      <CssBaseline/>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
      <ProvideUserAuth>
      <div className={"app-wrapper"}>
          <Header/>
          <div className={"content-wrapper"}>
              <Routes>
                  <Route path="/" element={<Homepage/>}/>
                  <Route path="/login" element={<Login/>}/>
                  <Route path="/register" element={<Register/>}/>
                  <Route path="/devices" element={<AuthRequired> <DevicesPage/> </AuthRequired>}/>
                  <Route path="/devices/:id" element={<AuthRequired> <DeviceDetailPage/> </AuthRequired>}/>
                  <Route path="/presets" element={<AuthRequired> <PublicPresetsPage/> </AuthRequired>}/>
                  <Route path="/presets/:id" element={<AuthRequired> <PublicPresetDetailPage/> </AuthRequired>}/>
                  <Route path="/profile" element={<AuthRequired> <ProfilePage/> </AuthRequired>}/>
              </Routes>
          </div>
          <Footer/>
      </div>
      </ProvideUserAuth>
      </LocalizationProvider>
      </ThemeProvider>
  );
}

export default App;
