import React from "react";
import firebase from "firebase";
import { Component } from "react";
import { TouchableWithoutFeedback, ImageBackground, Text } from "react-native";
import { styles } from "../../config/styles";
import { Button, View} from 'react-native'
import moment from "moment";

export default class Time extends Component{
  constructor(props){
    super(props);
      this.starttime = 0 ,
      this.endtime = 0,
      this.timesetter = 0,
    this.state = {
      Appointment : this.props.route.params.Appointment_Date,
      int2_id : this.props.route.params.int_id,
      mapflag: this.props.route.params.mapflag,
      Pin: this.props.route.params.Pin
    }
    console.log(this.props.route.params)
    this.time_assignment = this.time_assignment.bind(this);
  }


  time_set(desired_time){

    if(!this.startTime){
      if(desired_time == 1){
        this.startTime = "8:00am"
      }
      if(desired_time == 2){
        this.startTime = "9:00am"
      }
      if(desired_time == 3){
        this.startTime = "10:00am"
      }
      if(desired_time == 4){
        this.startTime = "11:00am"
      }
      if(desired_time == 5){
        this.startTime = "12:00pm"
      }
      if(desired_time == 6){
        this.startTime = "1:00pm"
      }
      if(desired_time == 7){
        this.startTime = "2:00pm"
      }

      this.timesetter = desired_time
  }
  else{

      if(this.timesetter > desired_time){

        this.endtime = this.startTime

        if(desired_time == 1){
          this.startTime = "8:00am"
        }
        if(desired_time == 2){
          this.startTime = "9:00am"
        }
        if(desired_time == 3){
          this.startTime = "10:00am"
        }
        if(desired_time == 4){
          this.startTime = "11:00am"
        }
        if(desired_time == 5){
          this.startTime = "12:00pm"
        }
        if(desired_time == 6){
          this.startTime = "1:00pm"
        }
        if(desired_time == 7){
          this.startTime = "2:00pm"
        }
        
        
      }
      else{
      
        if(desired_time == 1){
          this.endtime = "8:00am"
        }
        if(desired_time == 2){
          this.endtime = "9:00am"
        }
        if(desired_time == 3){
          this.endtime = "10:00am"
        }
        if(desired_time == 4){
          this.endtime = "11:00am"
        }
        if(desired_time == 5){
          this.endtime = "12:00pm"
        }
        if(desired_time == 6){
          this.endtime = "1:00pm"
        }
        if(desired_time == 7){
          this.endtime = "2:00pm"
        }  

      
      }


  }


  }

 time_assignment(selectedTime){
   
  selectedTime = this.startTime +'-'+ this.endtime
  
  
  if(this.state.mapflag == true){
    console.log("Pin is: ")
    console.log(this.state.Pin)
    const user = firebase.auth().currentUser;
    const uid = user.uid;
    const date = this.state.Appointment;
    const month = date.month();
    const day = date.date();
    const _time_ = selectedTime;
    const i_id = this.state.int2_id;
    const pin = this.state.Pin;
    const lat = pin.latitude; 
    const lon = pin.longitude;
    console.log('Params: ')
    console.log(this.props.route.params)
    console.log("lat is: ")
    console.log(lat)
    firebase.firestore()
    .collection('APPOINTMENTS')
    .add({ 
      participantes: [
      i_id,
      uid, 
      ],
      Month : month,
      Day: day,
      Time: _time_,
      Pin: [
        lat,
        lon,
      ], 
      })

  }
  else{
    const user = firebase.auth().currentUser
    const uid = user.uid
    const date = moment(this.state.Appointment)
    const month = date.month()
    const day = date.date()
    const _time_ = selectedTime
    const i_id = this.state.int2_id
    console.log('Params: ')
    console.log(this.props.route.params)
    firebase.firestore()
    .collection('APPOINTMENTS')
    .add({ 
      participantes: [
      i_id,
      uid, 
      ],
      Month : month,
      Day: day,
      Time: _time_,
      })

  }

  this.props.navigation.navigate('Home');
  
 } 


 render(){
    return(
      <TouchableWithoutFeedback style={styles.stdcontainer}>
        <ImageBackground style={styles.regcontainer} source={require('../../assets/yellow-white.jpg')}>
        <Button style={styles.cenregbutton} title="8:00am" onPress={() => this.time_set(1,)}/>
        <Button style={styles.cenregbutton} title="9:00am" onPress={() => this.time_set(2,)}/>
        <Button style={styles.cenregbutton} title="10:00am" onPress={() => this.time_set(3,)}/>
        <Button style={styles.cenregbutton} title="11:00am" onPress={() => this.time_set(4,)}/>
        <Button style={styles.cenregbutton} title="12:00pm" onPress={() => this.time_set(5,)}/>
        <Button style={styles.cenregbutton} title="1:00pm" onPress={() => this.time_set(6,)}/>
        <Button style={styles.cenregbutton} title="2:00pm" onPress={() => this.time_set(7,)}/>
        <Button style={styles.cenregbutton} title="Request Appointment" onPress={() => this.time_assignment()}/>
        </ImageBackground>
      </TouchableWithoutFeedback>
    );
  }
}