import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
import { Stack, useRouter } from "expo-router"
import { useColorScheme } from '@/hooks/useColorScheme'
import { StatusBar } from 'expo-status-bar'
import { Provider as StoreProvider } from 'react-redux'
import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper'
import store from '@/utils/store'
import * as SecureStore from '@/utils/SecureStore'
import { useStartBackgroundFetchServiceEffect } from '@/utils/background'
import { useStartGeolocationServiceEffect } from '@/utils/geolocation'
import { useEffect } from 'react'
import { useRouteInfo } from 'expo-router/build/hooks'

export default function RootLayout() {
  useStartGeolocationServiceEffect()
  useStartBackgroundFetchServiceEffect()
  const colorScheme = useColorScheme()
  const router = useRouter()
  const route = useRouteInfo()

  // Si on est pas connecté⋅e, on reste sur la fenêtre de connexion
  useEffect(() => {
    const isLoggedIn = SecureStore.getItem("apiToken") !== null
    if (!isLoggedIn && route.pathname !== "/login")
      router.navigate("/login")
  }, [route, router])

  return (
    <StoreProvider store={store}>
      <PaperProvider theme={colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme}>
        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
          <Stack>
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            <Stack.Screen name="login" options={{ headerShown: false }} />
            <Stack.Screen name="+not-found" />
          </Stack>
          <StatusBar style="auto" />
        </ThemeProvider>
      </PaperProvider>
    </StoreProvider>
  )
}