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,
      int2_id : this.props.route.params.int_id,
      mapflag: this.props.route.params.mapflag,
      i_token: this.props.route.params.I_Token,
      u_token: this.props.route.params.U_Token,
      username: this.props.route.params.Username,
      I_username: this.props.route.params.I_Username,
      pin: this.props.route.params.Pin
    }
    console.log(" Time params: ",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("UToken is: ")
    console.log(this.state.u_token)
    const user = firebase.auth().currentUser;
    const uid = user.uid
    const username = this.state.username;
    const I_username = this.state.I_username;
    const u_token = this.state.u_token;
    const i_token = this.state.i_token;
    const date = this.state.Appointment
    const month = date.getMonth() + 1;
    console.log("Month: ", month)
    const day = date.getDate();
    const _time_ = selectedTime;
    const i_id = this.state.int2_id;
    const lat = this.state.pin.latitude; 
    const lon = this.state.pin.longitude;
  
    firebase.firestore()
    .collection('APPOINTMENTS')
    .add({ 
      User: username,
      Interpreter: I_username,
      participantes: [
      i_id,
      uid, 
      ],
      new: true,
      Month : month,
      Day: day,
      Time: _time_,
      u_token : u_token,
      i_token : i_token,
      Pin: [
        lat,
        lon,
      ], 
      })

  }
  else{
    const user = firebase.auth().currentUser
    const uid = user.uid
    const u_token = this.state.u_token;
    const i_token = this.state.i_token;
    const date = this.state.Appointment
    const month = date.getMonth();
    const day = date.getDate();
    console.log("Date: ", day)
    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, 
      ],
      new: true,
      Month : month,
      Day: day,
      Time: _time_,
      u_token : u_token,
      i_token : i_token,
      })

  }

  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>
    );
  }
}