import { QueryClientProvider } from "@tanstack/react-query";
import queryClient from "../utils/queryClient";
import { Stack } from "expo-router";
import { StaffAuthProvider } from "@/components/context/staff-auth-context";
import { trpc, trpcClient } from "@/src/trpc-client";
import { SafeAreaView } from "react-native-safe-area-context";
import { RefreshProvider } from '../../../packages/ui/src/lib/refresh-context';

export default function Layout() {
  return (
    <QueryClientProvider client={queryClient}>
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        <StaffAuthProvider>
          <SafeAreaView
            edges={['left', 'right', 'bottom']}
            style={{ flex: 1, backgroundColor: '#fff' }}
            testID="app-root"
          >
            <RefreshProvider queryClient={queryClient}>
              <Stack screenOptions={{ headerShown: false }} />
            </RefreshProvider>
          </SafeAreaView>
        </StaffAuthProvider>
      </trpc.Provider>
    </QueryClientProvider>
  );
}
