import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { enableMapSet } from "immer";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { mountStoreDevtool } from "simple-zustand-devtools";
import "./App.css";
import useLocalStorage from "./hooks/useLocalStorage.js";
import { MapPage } from "./pages/Map";
import { useOnApprovalPointsFilters } from "./stores/useOnApprovalPointsFilters";
import { usePendingPointsFilters } from "./stores/usePendingPointsFilters";
import { usePointSelection } from "./stores/usePointSelection";
import { useWorkingPointsFilters } from "./stores/useWorkingPointsFilters";
// import { ReactKeycloakProvider } from "@react-keycloak/web";
// import { keycloak } from "./keycloak.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 (
    // <ReactKeycloakProvider authClient={keycloak}>
      <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>
    // </ReactKeycloakProvider>
  );
}

export default App;
