import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  Alert
} from "react-native";
import firebase from "react-native-firebase";
import {
  Notification,
  NotificationOpen,
  RemoteMessage
} from "react-native-firebase";

// Build a channel
const channel = new firebase.notifications.Android.Channel(
  "test-channel",
  "Test Channel",
  firebase.notifications.Android.Importance.Max
).setDescription("WahedMobile test channel");

// Firebase check permissions
firebase
  .messaging()
  .hasPermission()
  .then(enabled => {
    if (enabled) {
      // user has permissions
    } else {
      // user doesn't have permission
      // Ask user for permission
      firebase
        .messaging()
        .requestPermission()
        .then(() => {
          // User has authorised
        })
        .catch(error => {
          // User has rejected permissions
        });
    }
  });

interface Props {}

export class App extends Component {
  componentDidMount() {
    // Create the Android Channel
    firebase.notifications().android.createChannel(channel);

    // Listen for Remotemessages
    this.messageListener = firebase
      .messaging()
      .onMessage((message: RemoteMessage) => {
        // Process your message as required
        console.log("Message Listener");
      });
    // Notification displayed
    this.notificationDisplayedListener = firebase
      .notifications()
      .onNotificationDisplayed((notification: Notification) => {
        // Process your notification as required
        // ANDROID: Remote notifications do not contain the channel ID.
        // You will have to specify this manually if you'd like to re-display the notification.
        console.log("Notification Displayed Listener");
      });
    /*
     * Triggered when a particular notification has been received in foreground
     * */
    this.notificationListener = firebase
      .notifications()
      .onNotification((notification: Notification) => {
        const { title, body } = notification;
        this.showAlert(title, body);
        console.log("Notification Received Listener");
      });

    /*
     * If your app is in background, you can listen for when a notification is clicked / tapped / opened as follows:
     * */
    this.notificationOpenedListener = firebase
      .notifications()
      .onNotificationOpened((notificationOpen: NotificationOpen) => {
        // Get the action triggered by the notification being opened
        const action = notificationOpen.action;
        // Get information about the notification that was opened
        const notification: Notification = notificationOpen.notification;
        const { title, body } = notificationOpen.notification;
        // this.showAlert(title, body);
        console.log("Notification Opened Listener");
      });

    // Check if app opened or closed
    firebase
      .notifications()
      .getInitialNotification()
      .then((notificationOpen: NotificationOpen) => {
        if (notificationOpen) {
          // App was opened by a notification
          // Get the action triggered by the notification being opened
          const action = notificationOpen.action;
          // Get information about the notification that was opened
          const notification: Notification = notificationOpen.notification;
          console.log("Initial Notification Listener");
        }
      });
  }

  componentWillUnmount() {
    this.messageListener();
    this.notificationDisplayedListener();
    this.notificationListener();
    this.notificationOpenedListener();
  }

  showAlert(title, body) {
    Alert.alert(
      title,
      body,
      [{ text: "OK", onPress: () => console.log("OK Pressed") }],
      { cancelable: false }
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <MainNavComp />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  }
});

export default App;