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

import React, { Component } from 'react'
import { Platform, StyleSheet, Text, StatusBar, TouchableOpacity, View } from 'react-native'
import MainNav from './src/navigation/MainNav'
import firebase, { Notification } from 'react-native-firebase'
import  { store, persistor } from './src/redux/store'
import { Provider } from 'react-redux'
import { registerDevice, testConnect ,news} from './src/api/UserApi'
import { appSetPushToken, appSetDevice, appCleanDevice,appSetNotification } from './src/redux/app/action'
import { setLanguage, setStore as setApiStore, setToken } from 'src/api/api'
import { PersistGate } from 'redux-persist/integration/react'
import { create } from 'apisauce'

import SplashScreen from 'react-native-splash-screen'

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 firebase.messaging().getToken()
    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 {
      const enabled = await firebase.messaging().hasPermission()
      if (!enabled) {
        await firebase.messaging().requestPermission()
      }
    } catch (error) {
      console.log('error', error)
    }
  }

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

    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>
      </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