import { DarkTheme, DefaultTheme, Stack, ThemeProvider } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { useColorScheme } from 'react-native';

import { AnimatedSplashOverlay } from '@/components/animated-icon';
import { useTheme } from '@/hooks/use-theme';
import { StoreProvider } from '@/lib/store';

SplashScreen.preventAutoHideAsync();

function RootStack() {
  const theme = useTheme();
  return (
    <Stack
      screenOptions={{
        headerStyle: { backgroundColor: theme.background },
        headerTintColor: theme.text,
        headerShadowVisible: false,
        contentStyle: { backgroundColor: theme.background },
      }}>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="game/[id]" options={{ title: '' }} />
      <Stack.Screen
        name="add-game"
        options={{ presentation: 'modal', title: 'Add a game' }}
      />
      <Stack.Screen
        name="dispute/[matchId]"
        options={{ presentation: 'modal', title: 'File a dispute' }}
      />
    </Stack>
  );
}

export default function RootLayout() {
  const colorScheme = useColorScheme();
  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <StoreProvider>
        <AnimatedSplashOverlay />
        <RootStack />
      </StoreProvider>
    </ThemeProvider>
  );
}