import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { Stack, useRouter } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import 'react-native-reanimated';

import { Pressable } from 'react-native';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { useColorScheme } from '@/hooks/use-color-scheme';
import { LocalizationProvider, useTranslation } from '@/localization/i18n';

export const unstable_settings = {
  anchor: '(tabs)',
};

export default function RootLayout() {
  const colorScheme = useColorScheme();

  return (
    <LocalizationProvider>
      <RootNavigator colorScheme={colorScheme} />
    </LocalizationProvider>
  );
}

function RootNavigator({ colorScheme }: { colorScheme: string | null }) {
  const { t } = useTranslation();
  const router = useRouter();

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack
        screenOptions={{
          headerBackTitleVisible: false,
          headerBackTitle: '',
          headerBackTitleStyle: { display: 'none' },
          headerLeft: ({ canGoBack, tintColor }) =>
            canGoBack ? (
              <Pressable onPress={() => router.back()} hitSlop={10} style={{ paddingHorizontal: 8 }}>
                <IconSymbol
                  name="chevron.left"
                  size={20}
                  color={tintColor ?? (colorScheme === 'dark' ? '#FFFFFF' : '#1C1C1C')}
                />
              </Pressable>
            ) : null,
        }}>
        <Stack.Screen name="(tabs)" options={{ headerShown: false, title: '' }} />
        <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
      </Stack>
      <StatusBar style="auto" />
    </ThemeProvider>
  );
}