import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import { CssBaseline, Divider, ThemeProvider, useMediaQuery } from "@mui/material";

import Faq from "./pages/Faq/Faq";
import Wallet from "./pages/Wallet";
import Payment from "./pages/Payment/Payment";
import Support from "./pages/Support/Support";
import CustomTariff from "./pages/CustomTariff/CustomTariff";
import { TariffsVolume } from "./pages/Tariffs/TariffsVolume";
import { AccountSetup } from "./pages/AccountSetup";
import Landing from "./pages/Landing/Landing";
import Tariffs from "./pages/Tariffs/Tariffs";
import { TariffsTime } from "./pages/Tariffs/TariffsTime";
import Signin from "./pages/Signin";
import Signup from "./pages/Signup";

import Footer from "@components/Footer";
import Navbar from "@components/Navbar/Navbar";

import darkTheme from "@utils/themes/dark";
import lightTheme from "@utils/themes/light";

import { SnackbarProvider } from "notistack";

export const App = () => {
  const upMd = useMediaQuery(lightTheme.breakpoints.up("md"));

  return (
    <SnackbarProvider>
      <ThemeProvider theme={lightTheme}>
        <CssBaseline />
        <BrowserRouter>
          <Routes>
            <Route
              path="/"
              element={
                <ThemeProvider theme={darkTheme}>
                  <CssBaseline />
                  <Navbar isLoggedIn={false} isCollapsed={!upMd} />
                  <Divider sx={{ bgcolor: "#E3E3E3", borderColor: "#00000000" }} />
                  <Landing />
                  <Footer />
                </ThemeProvider>
              }
            />
            <Route path="/signin" element={<Signin />} />
            <Route path="/signup" element={<Signup />} />

            <Route
              path="tariffs/*"
              element={
                <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <Tariffs />
                </>
              }
            >
              <Route path="time" element={<TariffsTime />} />
              <Route path="volume" element={<TariffsVolume />} />
            </Route>

            <Route
              path="/faq"
              element={
                <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <Faq />
                </>
              }
            />
            <Route
              path="/wallet"
              element={
                <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <Wallet />
                </>
              }
            />
            <Route
              path="/payment"
              element={
                <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <Payment />
                </>
              }
            />
            <Route
              path="/support"
              element={
                <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <Support />
                </>
              }
            />
            <Route
              path="/support/:ticketId"
              element={
                <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <Support />
                </>
              }
            />
            <Route
              path="/tariffconstructor"
              element={
                <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <CustomTariff />
                </>
              }
            />
            <Route
              path="/settings"
              element={
                <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <AccountSetup />
                </>
              }
            />
          </Routes>
        </BrowserRouter>
      </ThemeProvider>
    </SnackbarProvider>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();