import { DarkTheme, NavigationContainer } from '@react-navigation/native'
import * as SplashScreen from 'expo-splash-screen'
import 'react-native-gesture-handler'
import React from 'react'
import { AppRegistry } from 'react-native'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { persistor, store } from './src/common/redux/store'
import { RootStack, routingService } from './src/common/routing'
import { config } from './src/config/index'
import { appSlice } from './src/modules/App'

SplashScreen.preventAutoHideAsync()
  .then(result => console.log(`SplashScreen.preventAutoHideAsync() succeeded: ${result}`))
  .catch(console.warn) // it's good to explicitly catch and inspect any error

const Root = () => (
  <Provider store={store}>
    <PersistGate
      loading={null}
      persistor={persistor}
      onBeforeLift={() => {
        // call foreground after persist rehydrate
        store.dispatch(appSlice.actions.initApp())
      }}
    >
      <NavigationContainer
        theme={DarkTheme}
        ref={navigatorRef => {
          routingService.setTopLevelNavigator(navigatorRef)
        }}
      >
        <RootStack />
      </NavigationContainer>
    </PersistGate>
  </Provider>
)

AppRegistry.registerComponent(config.application.name, () => Root)