import React, { Component } from 'react';
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';
import firebase from 'react-native-firebase';

class CreateEvent extends Component {

  constructor(props) {
    super(props);
    this.ref = firebase.firestore().collection('Events');

    this.state = {
          name: '',
          description: '',
          phone: '',
          date: '',
       }
  }

   handleName = (text) => {
      this.setState({name: text })
   }
   handleDescription = (text) => {
      this.setState({ description: text })
   }
   handlePhone = (number) => {
      this.setState({ phone: number })
   }

    handleDate = (date) => {
       this.setState({ date: date })
    }

    async sendToFirebase(name,description,creatorPhone,date) {
    this.ref.doc("56789").set({
      name,
      date: "2018-10-21T01:01:29Z",
      latitude: "41.3889301",
      longitude: "2.1170454",
      description,
      creatorPhone
    });
  }


   render() {
     const { name,description,creatorPhone,date } = this.state;

      return (
         <View style = {styles.container}>
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Name"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleName}/>

            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Description"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleDesciption}/>


             <TextInput style = {styles.input}
                underlineColorAndroid = "transparent"
                placeholder = "Phone"
                placeholderTextColor = "#9a73ef"
                autoCapitalize = "none"
                onChangeText = {this.handlePhone}/>

                <TextInput style = {styles.input}
                   underlineColorAndroid = "transparent"
                   placeholder = "date"
                   placeholderTextColor = "#9a73ef"
                   autoCapitalize = "none"
                   onChangeText = {this.handleDate}/>



            <TouchableOpacity
              onPress={() => this.sendToFirebase(name,description,creatorPhone,date)}
              style = {styles.submitButton}>
               <Text style = {styles.submitButtonText}> Submit </Text>
            </TouchableOpacity>
         </View>
      )
   }
}

const styles = StyleSheet.create({
   container: {
      paddingTop: 23
   },
   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },
   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },
   submitButtonText:{
      color: 'white'
   }
});

export default CreateEvent;