import React, { Component } from 'react';

import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text } from 'react-native';

export default class App extends Component {

  constructor(props) {
    super(props)

    this.state = {
      name_l: '',
      name_u: '',
      lid: '',
	  uid: ''
    }
  }

  insertList_Function = () => {

    fetch('https://ada.uprrp.edu/~laura.gonzalez19/4030/insert_list.php', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({

        name_l: this.state.name_l,

        name_u: this.state.name_u,

        lid: this.state.lid,
		
		uid: this.state.uid,

      })

    }).then((response) => response.json())
      .then((responseJson) => {
        // Showing response message coming from server after inserting records.
        Alert.alert(responseJson);
      }).catch((error) => {
        console.error(error);
      });


  }

  render() {
    return (

      <View style={styles.MainContainer}>

        <Text style={{ fontSize: 25, color: "#3414B3", textAlign: 'center', marginBottom: 15 }}>Draft: New List Form</Text>

        <TextInput
          placeholder="Who is using this list?"
          onChangeText={data => this.setState({ name_u: data })}
          underlineColorAndroid='transparent'
          style={styles.TextInputStyleClass}
        />
		
		 <TextInput
          placeholder="Name the list!"
          onChangeText={data => this.setState({ name_l: data })}
          underlineColorAndroid='transparent'
          style={styles.TextInputStyleClass}
        />

        <TextInput
          placeholder="Enter UID(Hidden)"
          onChangeText={data => this.setState({ uid: data })}
          underlineColorAndroid='transparent'
          style={styles.TextInputStyleClass}
        />

        <TextInput
          placeholder="Enter LID(Hidden)"
          onChangeText={data => this.setState({ lid: data })}
          underlineColorAndroid='transparent'
          style={styles.TextInputStyleClass}
        />

        <TouchableOpacity style={styles.button} onPress={this.insertList_Function} >

          <Text style={styles.text}>+</Text>
        </TouchableOpacity>
		<Text style={{ fontSize: 15, color: "#3414B3", textAlign: 'center', marginTop: 20, marginBottom: 15 }}>Start adding your lists </Text>
      </View>

    );
  }
}

const styles = StyleSheet.create({

  MainContainer: {

    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    margin: 10
  },

  TextInputStyleClass: {

    textAlign: 'center',
    marginBottom: 7,
    height: 40,
    width: '80%',
    borderWidth: 1,
    borderColor: '#3414B3',
    borderRadius: 5,
  },

  button: {
	height:'10%',
    width: '20%',
    paddingTop: 2,
    paddingBottom: 2,
    backgroundColor: '#3414B3',
    borderRadius: 100,
    marginTop: 20
  },

  text: {
    color: '#fff',
    fontSize: 40,
    textAlign: 'center',
    padding: 5
  }

});