booking

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, DatePickerAndroid, TimePickerAndroid, Picker, AppRegistry, TouchableOpacity } from 'react-native';
//import AvailableDates from '../Calendar/Calendar';
//import { Calendar, CalendarList } from 'react-native-calendars';

let arrBooked = []

const availableHours = {
    "timeSlots": {
        "slot1": "2:00pm to 2:30pm",
        "slot2": "2:30pm to 3:00pm",
        "slot3": "3:00pm to 3:30pm",
        "slot4": "3:30pm to 4:00pm",
        "slot5": "4:00pm to 4:30pm",
        "slot6": "4:30pm to 5:00pm"
    }
}

export default class Appointment extends Component {
    constructor(props) {
        super(props);

        this.state = {


            datePicker: false
        }


    }
    _onPressSlot(slot){
      arrBooked.push(slot)
      console.log(arrBooked);
    }
    render() {
        const availability = availableHours.timeSlots
        const _this = this
        return (
            <View style={styles.container}>
                <Text style={{ backgroundColor: '#00CED1', height: 35 }}>Hi! Please click on "calendar" to setup an appointment</Text>

                <View>
                    <Button
                        style={styles.buttonOne}
                        title="Make an appointment"
                        onPress={() => {
                            const { action, year, month, day } = DatePickerAndroid.open({
                                date: new Date()
                            }).then(response => {
                                this.setState({ datePicker: true })
                                response.month += 1
                            })
                        }}
                    />

                    {this.state.datePicker ? Object.keys(availability).map(function (time, i) {

                        return (<View
                                  key={i}
                                  style={styles.slotButton}>
                                 <TouchableOpacity onPress={() => _this._onPressSlot(time)}>
                                    <Text style={{ alignItems: 'center' }}>{availability[time]}</Text>
                                </TouchableOpacity>
                        </View>)
                    }) : null
                  }
                </View>
            </View>
        )
    }

}



const styles = StyleSheet.create({
    slotButton: {
      margin: 15,
      height: 50,
      backgroundColor: '#1e90ff',
      justifyContent: 'space-around',
      alignItems: 'center',
      borderRadius: 20
    },
    container: {
        flex: 1
    },
    buttonOne: {
        backgroundColor: 'blue'
    },
    slots: {
        flex: 2,
        backgroundColor: 'grey',
        flexDirection: 'row'
    }
})

AppRegistry.registerComponent('Foodilog', () => Appointment)