import React, { Component } from "react";
import { TextInput, StyleSheet, Text, View, TouchableOpacity, Alert } from 'react-native';
import NotifService from './NotifService';
import PushService from './PushService'
import moment from "moment";
import uuid from 'react-native-uuid'
import PushNotification from 'react-native-push-notification'
import { inject, observer } from "mobx-react";
import { observable } from "mobx";
import DateTimePicker from "react-native-modal-datetime-picker";
type Props = {};

@inject("appStore")
@observer
export default class PushNotificationTest extends Component<Props> {
  @observable
  startDate = new Date()

  @observable
  endDate = new Date()

  @observable
  DatePickervisable = false
  
  @observable
  whichDatePicker = 0

  @observable
  notificationArray = []

  @observable
  endNotification = {}

  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  handleDatePicked = date => {
    console.log("A date has been picked: ", date);
    // this.hideDateTimePicker();

    if (this.whichDatePicker === 0) {
      this.startDate = date;
    } else {
      this.endDate = date;
    }
    this.DatePickervisable = false;
  };

  looping(){
    var notificationDay =  moment(this.startDate).subtract(5, 'days');
    var endday = moment(this.endDate)
    console.log(notificationDay.toDate())
    console.log(endday.toDate())
    while  (notificationDay <= endday){
     var data = {}

     data.id = this.store.idGenerator()
     data.date = notificationDay.toDate()
     this.notificationArray.push(data)
     notificationDay = notificationDay.add(1,'months')
     console.log(notificationDay.toDate())
     
   }
  }

  async testing(){
     var newDate = moment(new Date())
     for(var i = 0;i<6;i++){
      var data = {}
      newDate = newDate.add(6,'seconds')
      data.id = this.store.idGenerator()
      data.date = newDate.toDate()
      data.title = 'testing'
      this.notificationArray.push(data)
      this.push(newDate.toDate(),data)
     }
  }

  async addNotification(){
    await this.looping()
    console.log(this.notificationArray)
  }

  push() {
   // this.lastId++;
   var date = new Date(Date.now() + (5 * 1000))
    PushNotification.localNotificationSchedule({
      date:date , // in 30 secs
      id:'fdsfsdf', 
      userInfo: {
        id: 1234, //IMPORTANT!! adding the userInfo, so that the cancel will work!
      },
  
    number:0,
      /* iOS only properties */
      alertAction: 'view', // (optional) default: view
     

      /* iOS and Android properties */
      title: 'test', // (optional)
      message: 'testing', // (required)
      playSound: true, // (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)
    });
  }

  cancelNotification(){
    // this.notificationArray.map((items,index)=>{
    //   this.cancel(items.id)
    // })
   for(var i = 0 ; i<3;i++){
     this.cancel(this.notificationArray[i].id)
   }
  }

  cancel(id){
    PushNotification.cancelLocalNotifications({id: id}); // must be id of type STRING so that the 
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Example app react-native-push-notification</Text>
        <View style={styles.spacer}></View>
       
        <View style={styles.spacer}></View>

        <TouchableOpacity style={styles.button} onPress={() => { this.push() }}><Text>Local Notification (now)</Text></TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => { this.push() }}><Text>Schedule Notification in 30s</Text></TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => { this.cancelNotification() }}><Text>Cancel last notification (if any)</Text></TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => { this.notif.cancelAll() }}><Text>Cancel all notifications</Text></TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => { this.notif.checkPermission(this.handlePerm.bind(this)) }}><Text>Check Permission</Text></TouchableOpacity>
        


        <View style={styles.spacer}></View>
       

        <View style={styles.spacer}></View>

        <TouchableOpacity
        onPress = {()=>{this.DatePickervisable = true;this.whichDatePicker = 0}}>
        <Text>
          set start date
        </Text>
        </TouchableOpacity>

          <TouchableOpacity
        onPress = {()=>{this.DatePickervisable = true;this.whichDatePicker = 1}}>
        <Text>
          set end date
        </Text>
        </TouchableOpacity>

  <TouchableOpacity
        onPress = {()=>{this.testing()}}>
        <Text>
          Load
        </Text>
        </TouchableOpacity>

         <DateTimePicker
            mode={"date"}
            isVisible={this.DatePickervisable}
            onConfirm={this.handleDatePicked}
            onCancel={() => {
              this.DatePickervisable = false;
            }}/>
      </View>
    );
  }

  



}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  button: {
    borderWidth: 1,
    borderColor: "#000000",
    margin: 5,
    padding: 5,
    width: "70%",
    backgroundColor: "#DDDDDD",
    borderRadius: 5,
  },
  textField: {
    borderWidth: 1,
    borderColor: "#AAAAAA",
    margin: 5,
    padding: 5,
    width: "70%"
  },
  spacer: {
    height: 10,
  },
  title: {
    fontWeight: "bold",
    fontSize: 20,
    textAlign: "center",
  }
});