import React from "react";
import ReactDOM from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";

import App from "./App";
import reportWebVitals from "./reportWebVitals";

import { BrowserRouter } from "react-router-dom";

import { DocumentProvider } from "./Components/DocumentViewPage/DocumentContext";
import ScrollToTop from "./Components/ScrollToTop/ScrollToTop";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { UserCapabilitiesProvider } from "./auth.capabilities";

import { MsalProvider } from "@azure/msal-react";
import { msalInstance } from "./auth";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <MsalProvider instance={msalInstance}>
      <QueryClientProvider client={queryClient}>
        <UserCapabilitiesProvider>
          <DocumentProvider>
            <BrowserRouter>
              <ScrollToTop />
              <App />
            </BrowserRouter>
            {/* {import.meta.env.DEV && (
              <ReactQueryDevtools initialIsOpen={false} />
            )} */}
          </DocumentProvider>
        </UserCapabilitiesProvider>
      </QueryClientProvider>
    </MsalProvider>
  </React.StrictMode>
);

reportWebVitals();