import React, { Component } from 'react';
import {StyleSheet,View} from 'react-native';
import { Calendar } from 'react-native-calendars';

export default class Calendario extends Component {
  constructor(props) {
    super(props);
    this.state = {
      markedDates: this.props.route.params.markedDates,
      selectedStartDate: null,
      interpreter_id : this.props.route.params.Intereprete_id,
      mapflag : this.props.route.params.Flag,
      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,
    };
    this.onDateChange = this.onDateChange.bind(this);
  }

  componentDidMount(){
    this.forceUpdate();
    this.setState({markedDates: this.props.route.params.markedDates});
  };

  onDateChange(date) {
    this.setState({
      selectedStartDate: date,
    });
    
    if(this.state.markedDates[date.dateString] != undefined){
      if(this.state.markedDates[date.dateString].selected == true){
        if(this.state.mapflag == false){
          this.props.navigation.navigate('StateTime', {Appointment: date._d, int_id : this.state.interpreter_id, 
            Flag: this.state.mapflag, I_Token: this.state.i_token, U_Token: this.state.u_token
            ,Username: this.state.username, I_Username: this.state.I_username});
        }
        else{
          this.props.navigation.navigate('Map', {Appointment_Date: date._d, int_id : this.state.interpreter_id, 
            Flag: this.state.mapflag, I_Token: this.state.i_token, U_Token: this.state.u_token
            ,Username: this.state.username, I_Username: this.state.I_username});
        }
      }
    }
  }
  
  render() {
    const { selectedStartDate } = this.state;
    const today = new Date();
    //const appointment = selectedStartDate ? selectedStartDate.toString() : '';
    return (
      <View style = {styles.container}>
        <Calendar
          markedDates={this.state.markedDates}
          minDate={today}
          onDayPress={this.onDateChange}
          selectionMode="singleDay"
          scrollMode="oneMonth"
          monthsAfter={24}
          
        />   
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    marginTop: 100,
  },
});