import { Prueba } from "@repo/rdx-ui/components";
import { Button, Toaster, TooltipProvider } from "@repo/shadcn-ui/components";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { Suspense, useState } from "react";
import { I18nextProvider } from "react-i18next";

import { LoadingOverlay, TailwindIndicator } from "@/components";
import { createAxiosDataProvider } from "@/lib/axios/create-axios-data-provider";
import { DataSourceProvider, ThemeProvider, UnsavedWarnProvider } from "@/lib/hooks";
import { i18n } from "@/locales";

import "./global.css";

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
      },
    },
  });

  const [count, setCount] = useState(0);

  return (
    <I18nextProvider i18n={i18n}>
      <QueryClientProvider client={queryClient}>
        <DataSourceProvider dataSource={createAxiosDataProvider(import.meta.env.VITE_API_URL)}>
          <ThemeProvider defaultTheme='light' storageKey='vite-ui-theme'>
            <TooltipProvider delayDuration={0}>
              <UnsavedWarnProvider>
                <Suspense fallback={<LoadingOverlay />}>
                  <div className='container mx-auto p-4'>
                    <Prueba />
                    <h1 className='text-xl font-bold mb-2'>This is a Vite application</h1>
                    <p className='mb-4'>
                      This shadcn/ui button is shared between Vite, NextJS and any other
                      application.
                    </p>
                    <Button onClick={() => setCount((count) => count + 1)}>Count is {count}</Button>
                  </div>
                </Suspense>
              </UnsavedWarnProvider>
            </TooltipProvider>
            <Toaster />
            <TailwindIndicator />
            {import.meta.env.MODE === "development" && <ReactQueryDevtools initialIsOpen={false} />}
          </ThemeProvider>
        </DataSourceProvider>
      </QueryClientProvider>
    </I18nextProvider>
  );
}

export default App;