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

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Clipboard
} from 'react-native';

import FCM from "react-native-fcm";

import PushController from "./PushController";
import firebaseClient from  "./FirebaseClient";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      token: "",
      tokenCopyFeedback: ""
    }
  }

  showLocalNotification() {
    FCM.presentLocalNotification({
      vibrate: 500,
      title: 'Hello',
      body: 'Test Notification',
      priority: "high",
      show_in_foreground: true,
      picture: 'https://firebase.google.com/_static/af7ae4b3fc/images/firebase/lockup.png'
    });
  }

  render() {
    let { token, tokenCopyFeedback } = this.state;

    return (
      <View style={styles.container}>
        <PushController
          onChangeToken={token => this.setState({token: token || ""})}
        />
        <Text style={styles.welcome}>
          Welcome to Simple Fcm Client!
        </Text>

        <Text selectable={true} onPress={() => this.setClipboardContent(this.state.token)} style={styles.instructions}>
          Token: {this.state.token}
        </Text>

        <Text style={styles.feedback}>
          {this.state.tokenCopyFeedback}
        </Text>

        <TouchableOpacity onPress={() => firebaseClient.sendNotification(token)} style={styles.button}>
          <Text style={styles.buttonText}>Send Notification</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={() => firebaseClient.sendData(token)} style={styles.button}>
          <Text style={styles.buttonText}>Send Data</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={() => firebaseClient.sendNotificationWithData(token)} style={styles.button}>
          <Text style={styles.buttonText}>Send Notification With Data</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={() => this.showLocalNotification()} style={styles.button}>
          <Text style={styles.buttonText}>Send Local Notification</Text>
        </TouchableOpacity>
      </View>
    );
  }

  setClipboardContent(text) {
    Clipboard.setString(text);
    this.setState({tokenCopyFeedback: "Token copied to clipboard."});
    setTimeout(() => {this.clearTokenCopyFeedback()}, 2000);
  }

  clearTokenCopyFeedback() {
    this.setState({tokenCopyFeedback: ""});
  }
}

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: 2,
  },
  feedback: {
    textAlign: 'center',
    color: '#996633',
    marginBottom: 3,
  },
  button: {
    backgroundColor: "teal",
    paddingHorizontal: 20,
    paddingVertical: 10,
    marginVertical: 15,
    borderRadius: 10
  },
  buttonText: {
    color: "white",
    backgroundColor: "transparent"
  },
});

@@ -514,16 +514,157 @@
  %7D%0A  %7D%0A%0A
+  componentDidMount()%7B%0A    FCM.getInitialNotification().then(notif =%3E %7B%0A      this.setState(%7B%0A        initNotif: notif%0A      %7D)%0A    %7D);%0A  %7D%0A%0A
   showLo
@@ -679,24 +679,24 @@
 ication() %7B%0A
-
     FCM.pres
@@ -953,16 +953,396 @@
 );%0A  %7D%0A%0A
+  scheduleLocalNotification() %7B%0A    FCM.scheduleLocalNotification(%7B%0A      id: 'testnotif',%0A      fire_date: new Date().getTime()+5000,%0A      vibrate: 500,%0A      title: 'Hello',%0A      body: 'Test Scheduled Notification',%0A      priority: %22high%22,%0A      show_in_foreground: true,%0A      picture: 'https://firebase.google.com/_static/af7ae4b3fc/images/firebase/lockup.png'%0A    %7D);%0A  %7D%0A%0A
   render
@@ -1642,32 +1642,126 @@
        %3C/Text%3E%0A%0A
+        %3CText%3E%0A          Init notif: %7BJSON.stringify(this.state.initNotif)%7D%0A%0A        %3C/Text%3E%0A%0A
         %3CText se
@@ -2702,32 +2702,32 @@
 styles.button%7D%3E%0A
-
           %3CText 
@@ -2810,16 +2810,220 @@
 Opacity%3E
+%0A%0A        %3CTouchableOpacity onPress=%7B() =%3E this.scheduleLocalNotification()%7D style=%7Bstyles.button%7D%3E%0A          %3CText style=%7Bstyles.buttonText%7D%3ESchedule Notification in 5s%3C/Text%3E%0A        %3C/TouchableOpacity%3E
 %0A      %3C

add schedule notification