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 { useEffect } from "react";
import Ionicons from "@expo/vector-icons/Ionicons";
import useLocationStore from "@/locationStore";

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const theme = colorScheme === "dark" ? MD3DarkTheme : MD3LightTheme;
  const router = useRouter();
  const fetchLocations = useLocationStore((state) => state.fetchLocations);

  useEffect(() => {
    fetchLocations();
  }, []);

  const deleteLocation = useLocationStore((state) => state.deleteLocation);

  const handleDelete = async (id) => {
    const isDeleted = await deleteLocation(id);
    if (isDeleted) {
      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>
  );
}