/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react'
import { StatusBar, StyleSheet, Text, TouchableOpacity } from 'react-native'
import MainNav from './src/navigation/MainNav'
import messaging from "@react-native-firebase/messaging"
import { persistor, store } from './src/redux/store'
import { Provider } from 'react-redux'
import { registerDevice } from './src/api/UserApi'
import { appSetDevice, appSetPushToken } from './src/redux/app/action'
import { setLanguage, setToken } from 'src/api/api'
import { PersistGate } from 'redux-persist/integration/react'
import Toast from 'react-native-toast-message'

import SplashScreen from 'react-native-splash-screen'
import { setBaseUrlByServerMode } from './src/api/api'

Text.defaultProps = Text.defaultProps || {}
Text.defaultProps.allowFontScaling = false

if (TouchableOpacity.defaultProps == null) TouchableOpacity.defaultProps = {}
TouchableOpacity.defaultProps.activeOpacity = 0.7

// setApiStore(store)
class App extends Component {

  constructor (props) {
    super(props)
    this._setDataFromInitState = this._setDataFromInitState.bind(this)
  }

  componentDidMount = () => {
    SplashScreen.hide()

  }

  initNotification = async () => {
    await this.setPermission()
    const fcmToken = await messaging().getAPNSToken();
    if (fcmToken) {
      store.dispatch(appSetPushToken(fcmToken))
      const resultSendDevice = await registerDevice(fcmToken)
      console.log(' re sult register_device =>', resultSendDevice)
      if (resultSendDevice.ok && resultSendDevice.data.success) {
        store.dispatch(appSetDevice(resultSendDevice.data.device))
      }
    }

  }

  setPermission = async () => {
    try {
      await messaging().registerDeviceForRemoteMessages();
      const authStatus = await messaging().requestPermission();
      const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL;
      if (!enabled) {
        await messaging().requestPermission()
      }
    } catch (error) {
      console.log('error', error)
    }
  }

  _setDataFromInitState () {
    const appState = store.getState().app
    let device = appState.device

    setBaseUrlByServerMode(appState.server_mode)

    if (appState.token) {
      setToken(appState.token)
    }
    if (appState.lang) {
      setLanguage(appState.lang)
    }

    if (!device) {
      this.initNotification()
    }

    console.log('app state', appState, device)

  }

  render () {

    return (
      <Provider store={store}>
        <PersistGate persistor={persistor} loading={null} onBeforeLift={this._setDataFromInitState}>
          <StatusBar barStyle="light-content"/>
          <MainNav/>
        </PersistGate>
        <Toast />
      </Provider>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})

export default App