import React, { Component } from 'react';

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

export default class Lists extends Component {

  constructor(props) {
    // const {navigation,route}=props
    // const {uid} = route.params;

    super(props)

    this.state = {
      name_l: '',
      store: '',
      lid: '',
	    uid: this.props.navigation.getParam('uid')
    }
  }

  insertList_Function = () => {

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

        name_l: this.state.name_l,

        store: this.state.store,
		
		    uid: this.state.uid,

      })

    }).then((response) => response.json())
      .then((responseJson) => {
        // Showing response message coming from server after inserting records.
      Alert.alert("Status",responseJson, [
              {
                  text: 'Cancel',
                  style: 'cancel'
                },
                { text: 'OK', onPress:() => this.props.navigation.navigate('Lists') }
              ],
              { cancelable: false }
            );
      
      });


  }

  render() {
    return (

      <View style={styles.MainContainer}>

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

		 <TextInput
          placeholder="Name the list!"
          onChangeText={data => this.setState({ name_l: data })}
          underlineColorAndroid='transparent'
          style={styles.TextInputStyleClass}
        />
        
        <TextInput
          placeholder="Where are you using this list?"
          onChangeText={data => this.setState({ store: 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:50,
    width: 50,
    paddingTop: 2,
    paddingBottom: 2,
    backgroundColor: '#3414B3',
    borderRadius: 100,
    marginTop: 20,
    alignItems: 'center'
  },

  text: {
    color: '#fff',
    fontSize: 35,
    textAlign: 'center',
    padding: 0
  }

});