import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router-dom";
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 AccountSetup from "./pages/AccountSetup";
import Landing from "./pages/Landing/Landing";
import Tariffs from "./pages/Tariffs/Tariffs";
import Signin from "./pages/auth/Signin";
import Signup from "./pages/auth/Signup";
import PaymentHistory from "./pages/PaymentHistory/PaymentHistory";
import Basket from "./pages/Basket/Basket";
import TariffPage from "./pages/Tariffs/TariffsPage";

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

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

import PublicRoute from "@utils/routes/publicRoute";
import PrivateRoute from "@utils/routes/privateRoute";

import reportWebVitals from "./reportWebVitals";
import { SnackbarProvider } from "notistack";

import "./index.css";

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={
                // <PublicRoute>
                  <Signin />
                // </PublicRoute>
              }
            />
            <Route
              path="/signup"
              element={
                // <PublicRoute>
                  <Signup />
                // </PublicRoute>
              }
            />

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

            <Route
              path="/faq"
              element={
                <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <Faq />
                </>
              }
            />
            <Route
              path="/wallet"
              element={
                // <PrivateRoute>
                  <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <Wallet />
                  </>
                // </PrivateRoute>
              }
            />
            <Route
              path="/payment"
              element={
                // <PrivateRoute>
                  <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <Payment />
                  </>
                // </PrivateRoute>
              }
            />
            <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={
                // <PrivateRoute>
                  <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <AccountSetup />
                  </>
                // </PrivateRoute>
              }
            />
            <Route
              path="/basket"
              element={
                <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <Basket />
                </>
              }
            />
            <Route
              path="/paymenthistory"
              element={
                // <PrivateRoute>
                  <>
                  <Navbar isLoggedIn={true} isCollapsed={!upMd} />
                  <PaymentHistory />
                  </>
                // </PrivateRoute>
              }
            />
          </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();