import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
import { Stack, useNavigationContainerRef } from 'expo-router'
import { StatusBar } from 'expo-status-bar'
import { Provider as StoreProvider } from 'react-redux'
import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { QueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
import { useReactNavigationDevTools } from '@dev-plugins/react-navigation'
import { useReactQueryDevTools } from '@dev-plugins/react-query'
import { useColorScheme } from '@/hooks/useColorScheme'
import store from '@/utils/store'
import { useStartBackgroundFetchServiceEffect } from '@/utils/background'
import LoginProvider from '@/components/LoginProvider'
import GeolocationProvider from '@/components/GeolocationProvider'
import GameProvider from '@/components/GameProvider'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 24 * 60 * 60 * 1000,  // 24h
      staleTime: 2000,
      retry: 5,
    }
  }
})

export default function RootLayout() {
  useStartBackgroundFetchServiceEffect()
  const colorScheme = useColorScheme()

  const navigationRef = useNavigationContainerRef()
  useReactNavigationDevTools(navigationRef)
  useReactQueryDevTools(queryClient)

  const asyncStoragePersister = createAsyncStoragePersister({
    storage: AsyncStorage,
  })  

  return (
    <StoreProvider store={store}>
      <PersistQueryClientProvider
          client={queryClient}
          persistOptions={{ persister: asyncStoragePersister }}
          onSuccess={() => queryClient.resumePausedMutations().then(() => queryClient.invalidateQueries())}>
        <LoginProvider loginRedirect={'/login'}>
          <GeolocationProvider>
            <GameProvider>
              <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="challenges-list" options={{ headerShown: false }} />
                    <Stack.Screen name="+not-found" />
                  </Stack>
                  <StatusBar style="auto" />
                </ThemeProvider>
              </PaperProvider>
            </GameProvider>
          </GeolocationProvider>
        </LoginProvider>
      </PersistQueryClientProvider>
    </StoreProvider>
  )
}