import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { LoginPage } from "./pages/Login";
import { VerifyRegistrationPage } from "./pages/VerifyRegistration";
import { MapPage } from "./pages/Map";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { enableMapSet } from "immer";
import { mountStoreDevtool } from "simple-zustand-devtools";
import { usePointSelection } from "./stores/usePointSelection";
import { usePendingPointsFilters } from "./stores/usePendingPointsFilters";
import { useOnApprovalPointsFilters } from "./stores/useOnApprovalPointsFilters";
import { useWorkingPointsFilters } from "./stores/useWorkingPointsFilters";
import useLocalStorage from "./hooks/useLocalStorage.js";

const queryClient = new QueryClient();

enableMapSet();

if (import.meta.env.MODE === "development") {
  mountStoreDevtool("PendingFilters", usePendingPointsFilters);
  mountStoreDevtool("OnApprovalFilters", useOnApprovalPointsFilters);
  mountStoreDevtool("WorkingFilters", useWorkingPointsFilters);
  mountStoreDevtool("PointSelection", usePointSelection);
}

const version = '0.0.9';

function App() {

  const [versionControl, setVersionControl] = useLocalStorage('version_control', version);

  if (versionControl !== version) {
    localStorage.clear();
    setVersionControl(version);
  }

  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter basename={import.meta.env.BASE_URL}>
        <Routes>
          <Route path="/" element={<MapPage />} />
          <Route path="/signin" element={<LoginPage />} />
          <Route path="/verify-user" element={<VerifyRegistrationPage />} />
          {/*<Route path="/register" element={<RegisterPage />} />*/}
        </Routes>
      </BrowserRouter>
    </QueryClientProvider>
  );
}

export default App;