import { AuthProvider, ThemeProvider, UnsavedWarnProvider } from "@/lib/hooks";
import { TooltipProvider } from "@/ui";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { Suspense } from "react";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { Routes } from "./Routes";
import { LoadingOverlay, TailwindIndicator } from "./components";
import { createAxiosAuthActions, createAxiosDataProvider } from "./lib/axios";
import { DataSourceProvider } from "./lib/hooks";

function App() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
        staleTime: 10000, // Specify a staleTime to only fetch when the data is older than a certain amount of time
      },
    },
  });

  return (
    <QueryClientProvider client={queryClient}>
      <DataSourceProvider dataSource={createAxiosDataProvider(import.meta.env.VITE_API_URL)}>
        <AuthProvider authActions={createAxiosAuthActions(import.meta.env.VITE_API_URL)}>
          <ThemeProvider defaultTheme='light' storageKey='vite-ui-theme'>
            <TooltipProvider delayDuration={0}>
              <UnsavedWarnProvider>
                <Suspense fallback={<LoadingOverlay />}>
                  <Routes />

                  <ToastContainer />
                </Suspense>
              </UnsavedWarnProvider>
            </TooltipProvider>
            <TailwindIndicator />
            <ReactQueryDevtools initialIsOpen={false} />
          </ThemeProvider>
        </AuthProvider>
      </DataSourceProvider>
    </QueryClientProvider>
  );
}

export default App;