import { ApolloProvider } from '@apollo/react-hooks'
import AsyncStorage from '@react-native-async-storage/async-storage'
import * as Font from 'expo-font'
import * as Notifications from 'expo-notifications'
import * as SplashScreen from 'expo-splash-screen'
import React, { useEffect, useState } from 'react'
import { Platform, StatusBar } from 'react-native'
import FlashMessage from 'react-native-flash-message'
import i18n from './i18n'
import setupApolloClient from './src/apollo/index'
import { AuthContext } from './src/context/auth'
import { ConfigurationProvider } from './src/context/configuration'
import AppContainer from './src/routes/index'

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false)
  const [client, setClient] = useState(null)
  const [token, setToken] = useState(false)
  const [appIsReady, setAppIsReady] = useState(false)

  useEffect(() => {
    ;(async () => {
      const token = await AsyncStorage.getItem('rider-token')
      if (token) setToken(token)
      setAppIsReady(true)
    })()
  }, [])

  useEffect(() => {
    ;(async () => {
      try {
        await SplashScreen.preventAutoHideAsync()
      } catch (e) {
        console.log(e)
      }
    })()
    loadData()
  }, [])

  const setTokenAsync = async token => {
    await AsyncStorage.setItem('rider-token', token)
    setToken(token)
  }

  const logout = async () => {
    try {
      await AsyncStorage.removeItem('rider-token')
      setToken(null)
    } catch (e) {
      console.log('Logout Error: ', e)
    }
  }

  async function loadData() {
    await i18n.initAsync()
    await Font.loadAsync({
      MuseoSans300: require('./assets/font/MuseoSans/MuseoSans300.ttf'),
      MuseoSans500: require('./assets/font/MuseoSans/MuseoSans500.ttf'),
      MuseoSans700: require('./assets/font/MuseoSans/MuseoSans700.ttf'),
      icomoon: require('./assets/font/icomoon.ttf')
    })
    const client = await setupApolloClient()
    await permissionForPushNotificationsAsync()
    setClient(client)
    setFontLoaded(true)
    await SplashScreen.hideAsync()
  }

  async function permissionForPushNotificationsAsync() {
    const { status: existingStatus } = await Notifications.getPermissionsAsync()
    let finalStatus = existingStatus
    // only ask if permissions have not already been determined, because
    // iOS won't necessarily prompt the user a second time.
    if (existingStatus !== 'granted') {
      // Android remote notification permissions are granted during the app
      // install, so this will only ask on iOS
      const { status } = await Notifications.requestPermissionsAsync()
      finalStatus = status
    }

    // Stop here if the user did not grant permissions
    if (finalStatus !== 'granted') {
      return
    }

    if (Platform.OS === 'android') {
      Notifications.setNotificationChannelAsync('default', {
        name: 'default',
        sound: true,
        priority: 'max',
        importance: Notifications.AndroidImportance.HIGH,
        vibrate: [0, 250, 250, 250]
      })
    }
  }

  if (fontLoaded && client && appIsReady) {
    return (
      <ApolloProvider client={client}>
        <StatusBar
          translucent
          backgroundColor={'transparent'}
          barStyle="dark-content"
        />
        <ConfigurationProvider>
          <AuthContext.Provider value={{ token, setTokenAsync, logout }}>
            <AppContainer />
          </AuthContext.Provider>
        </ConfigurationProvider>
        <FlashMessage duration={2000} position="center" />
      </ApolloProvider>
    )
  }
  return null
}