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

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

export default function RootLayout() {
  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())}>
        <ShareIntentProvider>
          <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>
        </ShareIntentProvider>
      </PersistQueryClientProvider>
    </StoreProvider>
  )
}