import { AuthProvider, ThemeProvider, UnsavedWarnProvider } from "@/lib/hooks";
import { Toaster, TooltipProvider } from "@/ui";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { Suspense } from "react";
import { I18nextProvider } from "react-i18next";
import { Routes } from "./Routes";
import { LoadingOverlay, TailwindIndicator } from "./components";
import { createAxiosAuthActions, createAxiosDataProvider } from "./lib/axios";
import { DataSourceProvider } from "./lib/hooks";
import i18n from "./locales/i18n.ts";

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 (
    <I18nextProvider i18n={i18n}>
      <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 />
                  </Suspense>
                </UnsavedWarnProvider>
              </TooltipProvider>
              <Toaster />
              <TailwindIndicator />
              <ReactQueryDevtools initialIsOpen={false} />
            </ThemeProvider>
          </AuthProvider>
        </DataSourceProvider>
      </QueryClientProvider>
    </I18nextProvider>
  );
}

export default App;
