//App.js
//Olivia Alberts
//Last updated: May 12th, 2020
//This file runs the bus app.

import React, {Component} from 'react';
import Geolocation from '@react-native-community/geolocation';
import {View, Text, StyleSheet, TouchableHighlightBase, Alert, Button, TextInput, TouchableOpacity} from 'react-native';

/************************************************************************************************ 
References:
      Youtube Video: "React Native - Geolocation - Episode 7" by Steve Griffith
                https://www.youtube.com/watch?v=KytduDMW_7o
      Bryan Nolan & ReactNativeCode.com
                https://reactnativecode.com/react-native-insert-text-input-data-to-mysql-server/
      Alyssa Khor & her 2019 Capstone Positive Notifications - Uplift

**************************************************************************************************/

const NUM_DATA_SENT = 5;    //this is the number of location data items we are sending, I choose five

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

    this.array = [];

    //testing
    // this.tempArray = [ 
    //   {"lat":45.185442,"long":-87.131192,"time":"6:46:00"},
    //   {"lat":45.184286,"long":-87.131151,"time":"6:46:30"},
    //   {"lat":45.184286,"long":-87.131151,"time":"6:47:00"},
    //   {"lat":45.183856,"long":-87.131140,"time":"6:47:30"},

    //   {"lat":45.183164,"long":-87.131032,"time":"6:48:00"},
    //   {"lat":45.181712,"long":-87.130964,"time":"6:48:30"},
    //   {"lat":45.181712,"long":-87.130964,"time":"6:49:00"},
    //   {"lat":45.181712,"long":-87.130964,"time":"6:50:30"},

    //   {"lat":45.180808,"long":-87.130955,"time":"6:50:30"},
    //   {"lat":45.180781,"long":-87.1131859,"time":"6:51:00"},
    //   {"lat":45.179835,"long":-87.132773,"time":"6:51:30"},
    //   {"lat":45.179835,"long":-87.132773,"time":"6:52:00"},

    // ];

    this.state = {
      ready: false,       //holds error for geolocation
      where: {            //object with latitude and longitude in it
        latitude:"null", 
        longitude:"null"
      }, 
      random: '',
      count: 0,
      error: null,
      Label: " "
    };
  }
 
  componentDidMount() {
    
    this.initializeArray();
    //this is our geolocation function call every 10 seconds 
    this.interval = setInterval(() => this.grabLocation(), 10000);

  }

  initializeArray() {

    for(let i = 0; i < NUM_DATA_SENT; i++) {    //fills an array of size NUM_DATA_SENT with null lat, long, and time
      this.array.push({
        lat: "null",
        long: "null",
        time: "null"
      });
    }
    //console.log(this.array);  //testing

  }

  //this function is called every 10 seconds
  grabLocation() {

    let geoOptions = {  //these are used anytime we call the geolocation object
      enableHighAccuray: true,  //this means we try to use the GPS on the phone, otherwise it will use wifi or something
      timeOut: 20000,           //20 seconds of waiting
     // maximumAge: 3600000,      //how long to store lat and long for, how long it's good for
    };
    this.setState({ready:false, error:null});

    /*****************************************
    getCurrentPosition takes three arguments: 
          what function to call when it works,
          function when it doesn't work,
          geoOptions
    ******************************************/
    Geolocation.getCurrentPosition(this.geoSuccess, this.geoFailure, geoOptions);

  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  //this function is what we do if we are successful at getting the location, used by geolocation getCurrentPosition
  geoSuccess = (position) => {
    var hour = new Date().getHours();   //current hours
    var min = new Date().getMinutes();  //current minutes
    var sec = new Date().getSeconds();  //current seconds
    this.setState({
      ready:true,

      //update these with the current data
      TextLat: position.coords.latitude,
      TextLong: position.coords.longitude,
      TextTime: hour + ':' +min + ':' + sec,

    }, () => {

      this.insertNewData();   //insert a new guy no matter what, size of NUM_DATA_SENT will be obtained because of our initialization
      // if(this.state.count == NUM_DATA_SENT)  //if our count has reached the number of data items we are sending in the array
      //   this.state.count = 0;                       //set the count back to zero for another round of new data!
      this.sendDataToServer();                    //send it all to the server!

    });
  }

  //this function inserts a new piece of data into the top of the array, which moves everything else down
    //then pops one off the back to maintain size
    //the array will then be sent to the server in sendDataToServer() function
  insertNewData() {
    
      // if(this.state.count < NUM_DATA_SENT && this.state.count >= 0) {

    this.array.unshift({                                //add the new guy to the front
      lat: this.state.TextLat,                                //current latitude
      long: this.state.TextLong,                              //current longitude
      time: this.state.TextTime                               //current time
    });
    this.array.pop();                                   //get rid of the guy on the end
    //console.log(this.array);    //testing

  }
  
  //this function is what we do if we are NOT successful at getting location 
    //used by geolocation getCurrentPosition
  geoFailure = (err) => {
    this.setState({error: err.message});
  }

  //this function sends a POST request to the server
    //the php receives it, makes sure it's okay, then sends it to a .json file
    //The Parent App will then pick up the data from the .json file
  sendDataToServer = async () => {

    const data = this.array;
    //const data = this.tempArray;
    fetch('http://compsci02.snc.edu/cs460/2020/albeoa/sendData.php', {
    
      method: 'POST',
      credentials: 'same-origin',
      mode: 'same-origin',
      headers: {
        'Accept' : 'application/json',
        'Content-Type' : 'application/json'
      },
      body: JSON.stringify(data)    //makes the data into a JSON string to be sent to server
    }).then(response => response.json())   //this processes the response
          .then(responseData => {
            console.log(responseData);  
          }).catch(error => {                               
            console.error(error);
          });

  }

  render() {
    return (
      <View style={styles.container}>
        { !this.state.ready && (  //this text will only appear if state object is false -- Using Geolocation flashes annoyingly
        <Text style={styles.title}>
          Location not being tracked.
        </Text>
        )}
        { this.state.error && (   //if there's an error, print it
          <Text>
          {this.state.error}     
        </Text>
        )}
      { this.state.ready && (   //if we're down here, we were successful at getting the position!
        <Text style={styles.title}>
          {this.state.TextLat} {"\n"}
          {this.state.TextLong} {"\n"}
          {this.state.TextTime}
        </Text>
        )}
      </View>
    );
  } 
};

const styles = StyleSheet.create({
  title: {
    fontSize: 25,
    textAlign: 'center'
  },
  btnBackGround: {
    backgroundColor: "green",
    paddingHorizontal: 30,
    paddingVertical: 20,
    borderRadius: 15
  },
  btnText: {
    fontSize: 25,
    fontWeight: '400',
    color: "black",
    textAlign: 'center'
  },
  container: {
    flex: 1,
    justifyContent: 'center'
  }
})