import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import "react-native-reanimated";

import AuthProvider from "@/components/providers/auth-provider";
import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
import "@/global.css";
import { useColorScheme } from "@/hooks/use-color-scheme";
import { ReactNode } from "react";
import { ToastProvider } from "react-native-toast-notifications";
import TaxonomyProvider from "../taxonomy-provider";

interface IndexProviderProps {
  children: ReactNode;
}
const queryClient = new QueryClient();

const IndexProvider = ({ children }: IndexProviderProps) => {
  const colorScheme = useColorScheme();
  const mode = colorScheme === "dark" ? "dark" : "light";

  return (
    <GluestackUIProvider mode={mode}>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <TaxonomyProvider>
            <ToastProvider>
              <ThemeProvider
                value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
              >
                {children}
              </ThemeProvider>
            </ToastProvider>
          </TaxonomyProvider>
        </AuthProvider>
      </QueryClientProvider>
    </GluestackUIProvider>
  );
};


export default IndexProvider;