import { AuthProvider, ThemeProvider } 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 { Routes } from "./Routes";
import { LoadingOverlay, TailwindIndicator } from "./components";
import { createAxiosDataProvider } from "./lib/axios";
import { createAxiosAuthActions } from "./lib/axios/createAxiosAuthActions";
import { DataSourceProvider } from "./lib/hooks/useDataSource/DataSourceContext";

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}>
              <Suspense fallback={<LoadingOverlay />}>
                <Routes />
                <ToastContainer />
              </Suspense>
            </TooltipProvider>
            <TailwindIndicator />
            <ReactQueryDevtools initialIsOpen={false} />
          </ThemeProvider>
        </AuthProvider>
      </DataSourceProvider>
    </QueryClientProvider>
  );
}

export default App;
