import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, AppState } from "react-native";
import { Root } from "native-base";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/es/integration/react";
import axios from 'axios';
import PushNotification from 'react-native-push-notification';

import url from './config/api_service';
import AppNavigation from "./navigations";
import configureStore from "./store/store";
import Axios from "axios";
import VirtualizedList from "./pages/components/VirtualizedList";

const { store, persistor } = configureStore();

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      isReady: false,
      platformSystem:'',
      versionApps:'',
      appState: AppState.currentState,
      notificationOpen: false,
      status: ''
    };
    this.configureNotif();
    this.onCheck();
    this._handleAppStateChange = this._handleAppStateChange.bind(this)
    this.interval;
  }


  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  configureNotif(){
    PushNotification.configure({

      // (optional) Called when Token is generated (iOS and Android)
      onRegister: function(token) {
          console.log( 'TOKEN:', token );
      },

      // (required) Called when a remote or local notification is opened or received
      onNotification: (notification) => {
          const status = notification.message.split('-')[0]
          this.setState({
            notificationOpen: true,
            status
          })

          // process the notification

          // required on iOS only (see fetchCompletionHandler docs: https://facebook.github.io/react-native/docs/pushnotificationios.html)
      },

      // ANDROID ONLY: GCM or FCM Sender ID (product_number) (optional - not required for local notifications, but is need to receive remote push notifications)

      // IOS ONLY (optional): default: all - Permissions to register.
      permissions: {
          alert: true,
          badge: true,
          sound: true
      },

      // Should the initial notification be popped automatically
      // default: true
      popInitialNotification: true,

      /**
        * (optional) default: true
        * - Specified if permissions (ios) and token (android and ios) will requested or not,
        * - if not, you must call PushNotificationsHandler.requestPermissions() later
        */
      requestPermissions: true,
  });
  }

  _handleAppStateChange = (nextAppState) => {
    // if(nextAppState === 'background'){
    //   console.log(nextAppState)
    //   this.interval = setInterval(this.onCheck, 720000)
    // }
  }

  async onCheck(){
    try {
      const notif = await Axios.get('http://elma.myadais.com/api/ebis_getnotification')
      await notif.data.forEach((element, index) => {
          console.warn('called')
          PushNotification.localNotification({
            /* Android Only Properties */
            id: index, // (optional) Valid unique 32 bit integer specified as string. default: Autogenerated Unique ID
            ticker: "My Notification Ticker", // (optional)
            autoCancel: true, // (optional) default: true
            largeIcon: "ic_launcher", // (optional) default: "ic_launcher"
            smallIcon: "ic_notification", // (optional) default: "ic_notification" with fallback for "ic_launcher"
            // bigText: "My big text that will be shown when notification is expanded", // (optional) default: "message" prop
            subText: "A new update", // (optional) default: none
            color: "red", // (optional) default: system default
            vibrate: true, // (optional) default: true
            vibration: 300, // vibration length in milliseconds, ignored if vibrate=false, default: 1000
            tag: 'some_tag', // (optional) add tag to message
            // group: "group", // (optional) add group to message
            ongoing: false, // (optional) set whether this is an "ongoing" notification
            priority: "high", // (optional) set notification priority, default: high
            visibility: "public", // (optional) set notification visibility, default: private
            importance: "high", // (optional) set notification importance, default: high
            /* iOS and Android properties */
            title: "EPM Mobile", // (optional)
            message: `${element.NOTIF_STATUS}-${element.TOTAL}`, // (required)
            playSound: false, // (optional) default: true
            soundName: 'default', // (optional) Sound to play when the notification is shown. Value of 'default' plays the default sound. It can be set to a custom sound such as 'android.resource://com.xyz/raw/my_sound'. It will look for the 'my_sound' audio file in 'res/raw' directory and play it. default: 'default' (default sound is played)
            number: '10', // (optional) Valid 32 bit integer specified as string. default: none (Cannot be zero)
            repeatType: 'day', // (optional) Repeating interval. Check 'Repeating Notifications' section for more info.
            // actions: '["Yes", "No"]',  // (Android only) See the doc for notification actions to know more
        });
      });
    } catch (err) {
      console.warn(err)
    }
  }

  render() {
    if(this.state.notificationOpen){
      return (
        <VirtualizedList
          status={this.state.status}
          onBack={() => this.setState({ notificationOpen: false })}
        />
      )
    }
    return (
      <Provider store={store}>
        <PersistGate loading={<View style={{justifyContent:'center', alignItems:'center', flex:1}}><Text style={{textAlign:'center'}}>Loading...</Text></View>} persistor={persistor}>
          <Root>
            <AppNavigation />
          </Root>
        </PersistGate>
      </Provider>
    );
  }
}