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 useLocationStore from '@/store';

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const theme = colorScheme === 'dark' ? MD3DarkTheme :
  MD3LightTheme;
  const deleteLocation = useLocationStore((state) => state.deleteLocation);
  const router = useRouter();
  
  const handleDelete = (id) => {
            deleteLocation(id);
            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>
  );
}