import { Stack } from "expo-router";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { Provider as ReduxProvider } from "react-redux";
import { Provider as PaperProvider, MD3LightTheme } from "react-native-paper";

import { AuthProvider } from "@/auth/AuthContext";
import { ScreenSizeListenerWrapper } from "@/hooks/useScreenSizeListener";
import { useDocumentTitle } from "@/hooks/useDocumentTitle";
import { store } from "store";

import "./globals.css";

const theme = {
  ...MD3LightTheme,
  colors: {
    ...MD3LightTheme.colors,
  },
};

const RootLayout = () => {
  useDocumentTitle();

  return (
    <ReduxProvider store={store}>
      <AuthProvider>
        <PaperProvider theme={theme}>
          <SafeAreaProvider>
            <ScreenSizeListenerWrapper />
            <SafeAreaView className="flex-1">
              <Stack>
                <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
                <Stack.Screen name="(auth)" options={{ headerShown: false }} />
              </Stack>
            </SafeAreaView>
          </SafeAreaProvider>
        </PaperProvider>
      </AuthProvider>
    </ReduxProvider>
  );
};

export default RootLayout;