import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, Picker, AppState, DatePickerIOS, Alert, FlatList, Header} from 'react-native';
import PushController from './PushController.js';
import PushNotification from 'react-native-push-notification';
import moment from 'moment';


export default class AddTimes extends Component<Props> {
  constructor(props){
    super(props);

    this.handleAppStateChange = this.handleAppStateChange.bind(this);
    this.state = {
      chosenDate: new Date(),
      loading: false,
      dataSource: [],
    };
    this.setDate = this.setDate.bind(this);
  }

  setDate(newDate)
  {
    this.setState({chosenDate: newDate})
  }

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

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

  handleAppStateChange(appState) {
    console.log(appState);
    console.log(Platform.OS);
    console.log(this.state.chosenDate);
  }

  componentDidMount() {this.fetchData();} //GETS THE QUOTES FROM THE DATABASE
  fetchData = () => {this.setState({loading: true});

    const { navigation } = this.props;
    const username = navigation.getParam('user', 'test');

    fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/get_times.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
  
      user: username
  
    }) //This is a test to see if branch worked
  
  })
  .then(response => response.json())
  .then(responseJson => {
  console.log(responseJson);
  responseJson = responseJson.map(item => {
    
   //item.isSelect = false;
    //item.selectedClass = styles.list;


  return item;
  });
  this.setState({
  loading: false,
  dataSource: responseJson,
  });
  }).catch(error => {this.setState({loading: false});
  });
  };

  _AddTime(){
    console.log("In Add Time");
    var date = new Date();
    var time = this.state.chosenDate.toLocaleTimeString('it-IT');
    
    var words = time.split(':');
    var count = words.length;

    var hour = words[0];
    var minutes = words[1];
    
    date.setHours(hour, minutes, 0, 0);


    //let date = new Date(this.state.chosenDate);
    //console.log(date);
    const { navigation } = this.props;
    const username = navigation.getParam('user', 'test');
    console.log(date);


    let formattedDate = ( moment(date).format('h:mm a') );
    console.log("formatted: " + formattedDate);

    //Add time into the table
    fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/insert_time.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
  
      user: username,
      key: formattedDate,
      time: formattedDate
  
    })
  
  }).then((response) => response.json())
        .then((responseJson) => {
  // Showing response message coming from server after inserting records.
          if (responseJson == "Success!")
          {
            console.log("success");
          }
          else{
            Alert.alert(responseJson);
            return;
          }
  
        }).catch((error) => {
          console.error(error);
        });

    //Fetching quote
    fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/get_quote.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
  
      name: this.state.data
  
    })
  
  }).then((response) => response.json())
        .then((responseJson) => {
          this.setState({data: responseJson})
          PushNotification.scheduleLocalNotification({
          alertBody: responseJson,
          fireDate: date,
          repeatInterval: 'day',
          userInfo: { id : formattedDate }
        });
        }).catch((error) => {
          console.error(error);
        });
  }

  _CancelTime()
  {
    PushNotification.cancelLocalNotifications({ id : this.state.chosenDate});
  }

  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.welcome}>Choose your notification time that will occur each day of the week.</Text>
        <DatePickerIOS
          date={this.state.chosenDate}
          onDateChange= {(chosenDate) => this.setState({chosenDate})}
          mode='time'
        />
        <Button
          style = {{ paddingTop: 40 }}
          title="Add Time"
          onPress={this._AddTime.bind(this)}
        />
        <PushController />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});