import { useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { StyleSheet } from "react-native";
import { useWallpaperStore } from "@/stores/wallpaper.store";
import { useSettingsStore } from "@/stores/settings.store";
import { colors } from "@/theme";

export default function RootLayout() {
  const loadWallpapers = useWallpaperStore((s) => s.loadSavedWallpapers);
  const loadSettings = useSettingsStore((s) => s.loadSettings);

  useEffect(() => {
    loadWallpapers();
    loadSettings();
  }, []);

  return (
    <GestureHandlerRootView style={styles.root}>
      <StatusBar style="light" />
      <Stack
        screenOptions={{
          headerShown: false,
          contentStyle: { backgroundColor: colors.background },
          animation: "fade",
        }}
      >
        <Stack.Screen name="(tabs)" />
        <Stack.Screen
          name="picker"
          options={{ animation: "slide_from_bottom", presentation: "modal" }}
        />
        <Stack.Screen
          name="editor/[id]"
          options={{ animation: "fade" }}
        />
      </Stack>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: colors.background,
  },
});