import { Link, Stack, useRouter } from 'expo-router';
import { useColorScheme } from 'react-native';
import { PaperProvider } from 'react-native-paper';
import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
import Ionicons from '@expo/vector-icons/Ionicons';
import { deleteLocation } from '@/api/locations';

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const theme = colorScheme === 'dark' ? MD3DarkTheme :
    MD3LightTheme;
  const router = useRouter();

  const handleDelete = (id) => {
    deleteLocation(id);
    while (router.canGoBack()) {
      router.back();
    }
    router.replace('/');
  };

  return (
    <PaperProvider theme={theme} >
      <Stack screenOptions={{
        headerStyle: {
          backgroundColor: theme.colors.primaryContainer,
          borderBottomWidth: 0
        },
        headerTintColor: theme.colors.primary,
      }}>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen
          name="location/[id]"
          options={({ route }) => ({
            title: "Lokalizacja",
            headerBackTitle: "Powrót",
            headerRight: () => (
              <Link
                href={`location/edit/${route.params.id}`}
                asChild
                style={{ marginRight: 11 }}
              >
                <Ionicons name="pencil" color={theme.colors.primary} size={24} />
              </Link>
            ),
          })}
        />
        <Stack.Screen name="location/edit/[id]" options={({ route }) => ({
          title: "Edycja",
          headerRight: () => (
            <Ionicons name="trash-bin" color={theme.colors.primary} size={24} onPress={() => handleDelete(route.params.id)} />
          ),
        })}

        />
      </Stack>
    </PaperProvider>
  );
}