import * as React from 'react'
import { StatusBar, Platform, StyleSheet, View } from 'react-native'
import { NavigationContainer, CommonActions } from '@react-navigation/native'
import {
  createStackNavigator,
  CardStyleInterpolators,
} from '@react-navigation/stack'
import { UseAPIProvider } from '@umijs/use-request'

import { Provider as PaperProvider } from 'react-native-paper'
import { Provider } from '@ant-design/react-native'
import useModel from 'flooks'
import { useUpdateEffect } from '@umijs/hooks'

import { navigationRef } from './navigation/RootNavigation'
import useCachedResources from './hooks/useCachedResources'
import BottomTabNavigator from './navigation/BottomTabNavigator'
import BasicScreens from './navigation/BaseNavigator'
import words from './flooks/Words'
import user from './flooks/User'
import request from './Utils/RequestUtils'
import theme from './constants/Theme'

const Stack = createStackNavigator()

export default function App() {
  const isLoadingComplete = useCachedResources()
  const { wordsInit, local } = useModel(words, ['local'])
  // Load words  local语言转变，切换语言
  React.useEffect(() => {
    wordsInit()
  }, [local])
  const { id } = useModel(user, ['id'])
  useUpdateEffect(() => {
    let initName = ''
    if (id === 0) {
      // 未登录
      initName = 'Login'
    } else if (id !== null) {
      // 已登录
      initName = 'Home'
    }
    if (initName) {
      navigationRef.current.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [
            {
              name: initName,
            },
          ],
        })
      )
    }
  }, [id])

  if (!isLoadingComplete) {
    return null
  } else {
    return (
      <View style={styles.container}>
        <UseAPIProvider
          value={{
            requestMethod: request,
          }}
        >
          <PaperProvider theme={theme}>
            <Provider>
              {Platform.OS !== 'ios' && (
                <StatusBar translucent={false} backgroundColor="#FFC21C" />
              )}
              <NavigationContainer ref={navigationRef}>
                <Stack.Navigator
                  initRouteName="InitApp"
                  screenOptions={{
                    gestureEnabled: true,
                    cardStyleInterpolator:
                      CardStyleInterpolators.forHorizontalIOS,
                  }}
                  headerMode="none"
                >
                  {/* 基础功能页面 */}
                  {BasicScreens(Stack.Screen)}
                  <Stack.Screen name="Home" component={BottomTabNavigator} />
                </Stack.Navigator>
              </NavigationContainer>
            </Provider>
          </PaperProvider>
        </UseAPIProvider>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
})