import { Link, Stack } 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';

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

  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={{ title: "Edycja" }} />
        </Stack>
    </PaperProvider>
  );
}