import React, { Component } from 'react';
import { View, StyleSheet, Text, TouchableOpacity, Platform, TextInput, SafeAreaView } from 'react-native';
import { Button, Left } from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
import Axios from 'axios';
import DateTimePickerModal  from 'react-native-modal-datetime-picker';
import AsyncStorage from '@react-native-community/async-storage';

class Bookings extends Component {
    constructor(props) {
        super(props);
        this.state = {
                isDateTimePickerVisible: false,
                date: '',
                time: ''

        }
    }

   async handleSubmit ()  {
        // console.log(this.state)
        const resToken = await AsyncStorage.getItem('token')
        const token = JSON.parse(resToken);
        Axios({
          method: 'post',
          url: 'http://192.168.56.1/vzuu/public/api/bookings',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + token.data.success.token,
          },
          data: {
            'date': this.state.date,
            'time': this.state.time,
          },
        })
          .then(function (response) {
            console.log(response.data);
          })
          .catch(function (error) {
            console.log(error);
          });
          this.setState({ date: '', time:''});
      }

    showDateTimePicker = () => {
        this.setState({ isDateTimePickerVisible: true });
      };

      hideDateTimePicker = () => {
        this.setState({ isDateTimePickerVisible: false });
      };

      handleDatePicked = date => {
        console.log("A date has been picked: ", date);
        this.setState({date: date})
        this.hideDateTimePicker();
      };


    render() {
    return(
            <View style={{ marginHorizontal: 17, paddingTop: 15 }}>
                  <View style={{marginTop: 30}}></View>
                    <Text style={[styles.text, { textAlign: 'left' }, { color: '#000' }, { fontSize: 18}]}>
                    Date
                </Text>
                    <View style={{marginTop: 20}}></View>
                        <TouchableOpacity onPress={this.showDateTimePicker}>
                            <Icon name="calendar" size={24} color="#DC143C" />
                        </TouchableOpacity>
                    <TextInput style={{color: '#000000', fontSize: 12 }} underlineColorAndroid="#E91E63" value={this.state.date} />
                        <DateTimePickerModal
                            underlineColorAndroid="#E91E63"
                            isVisible={this.state.isDateTimePickerVisible}
                            onConfirm={this.handleDatePicked}
                            onCancel={this.hideDateTimePicker}
                            mode={'date'}
                            is24Hour={false}
                            locale="en_GB"
                            onDateChange={date => this.setState({ date: date })} value={this.state.date} />

            {/* <View style={{marginTop: 30}}></View>
                <Text style={[styles.text, { textAlign: 'left' }, { color: '#000' }, { fontSize: 18}]}>
                    Time
                    </Text>
                <View style={{marginTop: 20}}></View>
                    <TouchableOpacity onPress={this.showDateTimePicker}>
                        <Icon name="clock" size={24} color="#DC143C" />
                    </TouchableOpacity>
                        <TextInput style={{color: '#000000', fontSize: 12 }} underlineColorAndroid="#E91E63" value={this.state.time}/>
                            <DateTimePickerModal
                                underlineColorAndroid="#E91E63"
                                isVisible={this.state.isDateTimePickerVisible}
                                onConfirm={this.handleDatePicked}
                                onCancel={this.hideDateTimePicker}
                                mode={'time'}
                                is24Hour={false}
                                locale="en_GB"
                                onDateChange={time => this.setState({ time: time })} value={this.state.time} /> */}

                                <View style={{ paddingTop: 30}}>
                                    <SafeAreaView style={styles.container}>
                                        <View style={{ flexDirection: 'row' }}>
                                            <Left>
                                                <View style={{paddingTop: 15 }}>
                                                    <Button small rounded danger onPress={this.handleSubmit}>
                                                    <Text style={{ color: '#fff' }}>    Send    </Text>
                                                </Button>
                                            </View>
                                        </Left>
                                    </View>
                                </SafeAreaView>
                            </View>
                        </View>
                    )

                }
            }

export default Bookings;
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'

    }
})