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

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();

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false, title: '' }} />
        <Stack.Screen
          name="fields"
          options={{
            headerShown: true,
            title: t('fields.title'),
            headerBackTitleVisible: false,
            headerBackTitle: '',
          }}
        />
        <Stack.Screen
          name="tasks"
          options={{
            headerShown: true,
            title: t('tasks.title'),
            headerBackTitleVisible: false,
            headerBackTitle: '',
          }}
        />
        <Stack.Screen
          name="task-history"
          options={{
            headerShown: true,
            title: t('tasks.historyTitle'),
            headerBackTitleVisible: false,
            headerBackTitle: '',
          }}
        />
        <Stack.Screen
          name="observations"
          options={{
            headerShown: true,
            title: t('observations.title'),
            headerBackTitleVisible: false,
            headerBackTitle: '',
          }}
        />
        <Stack.Screen
          name="crops"
          options={{
            headerShown: true,
            title: t('crops.title'),
            headerBackTitleVisible: false,
            headerBackTitle: '',
          }}
        />
        <Stack.Screen
          name="harvests"
          options={{
            headerShown: true,
            title: t('harvests.title'),
            headerBackTitleVisible: false,
            headerBackTitle: '',
          }}
        />
        <Stack.Screen
          name="sales"
          options={{
            headerShown: true,
            title: t('sales.title'),
            headerBackTitleVisible: false,
            headerBackTitle: '',
          }}
        />
        <Stack.Screen
          name="costs"
          options={{
            headerShown: true,
            title: t('costs.title'),
            headerBackTitleVisible: false,
            headerBackTitle: '',
          }}
        />
        <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
      </Stack>
      <StatusBar style="auto" />
    </ThemeProvider>
  );
}