import { Stack, useRouter } from 'expo-router';
import { Pressable } from 'react-native';

import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
import { useTranslation } from '@/localization/i18n';

export default function LogbookLayout() {
  const { t } = useTranslation();
  const router = useRouter();
  const colorScheme = useColorScheme();

  return (
    <Stack
      screenOptions={{
        headerBackTitleVisible: false,
        headerBackTitle: '',
        headerBackTitleStyle: { display: 'none' },
        headerLeft: ({ canGoBack }) =>
          canGoBack ? (
            <Pressable onPress={() => router.back()} hitSlop={10} style={{ paddingHorizontal: 8 }}>
              <IconSymbol size={20} name="chevron.left" color={Colors[colorScheme ?? 'light'].text} />
            </Pressable>
          ) : null,
      }}>
      <Stack.Screen name="index" options={{ title: t('logbook.title') }} />
      <Stack.Screen name="fields" options={{ title: t('fields.title') }} />
      <Stack.Screen name="fields/[id]" options={{ title: t('fields.edit') }} />
      <Stack.Screen name="crops" options={{ title: t('crops.title') }} />
      <Stack.Screen name="crops/new" options={{ title: t('crops.new') }} />
      <Stack.Screen name="crops/[id]" options={{ title: t('crops.edit') }} />
    </Stack>
  );
}
