import React, { Component } from 'react';
import { Text, View, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
import { Actions } from 'react-native-router-flux';
import axios from 'axios';

class AddItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userId: this.props.userId,
      name: '',
      price: '',
      data: [],
      error: ''
    };
    this.insertItem = this.insertItem.bind(this);
  }

  handleName = (text) => {
    this.setState({ name: text });
  }

  handlePrice = (text) => {
    this.setState({ price: text });
  }

  insertItem = () => {
    var thisItem = this;
    axios.post('http://localhost:3000/users/' + this.state.userId + '/items', {
      name: this.state.name,
      price: this.state.price
    })
    .then(() => {
      Actions.itemsList({
        userId: this.state.userId
      });
    })
    .catch(() => this.setState(
        { error: 'Item not added.'
      }
    ));
  }

  render() {
    return (
      <View>

        <TextInput
          label="Name"
          placeholder="bike"
          style={styles.input}
          placeholder="Example: Bike"
          placeholderTextColor="#6A6B5F"
          autoCapitalize="none"
          onChangeText={this.handleName}
        />
        <TextInput
          label="Price"
          placeholder="Example: $100"
          style={styles.input}
          placeholderTextColor="#6A6B5F"
          onChangeText={this.handlePrice}
        />
        <TouchableOpacity style={styles.submitButton}>
        <Text
          style={styles.submitButtonText}
          onPress={() => this.insertItem()}
        >
          Add It!
        </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default AddItem;

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

@@ -1003,16 +1003,41 @@
    %3CView
+ style=%7Bstyles.container%7D
 %3E%0A%0A     
@@ -1195,39 +1195,37 @@
 olderTextColor=%22
-#6A6B5F
+white
 %22%0A          auto
@@ -1286,32 +1286,34 @@
 ame%7D%0A        /%3E%0A
+%0A%0A
         %3CTextInp
@@ -1444,15 +1444,13 @@
 or=%22
-#6A6B5F
+white
 %22%0A  
@@ -1500,16 +1500,17 @@
      /%3E%0A
+%0A
         
@@ -1541,28 +1541,31 @@
 %7Bstyles.
-submitButton
+buttonContainer
 %7D%3E%0A     
@@ -1857,118 +1857,250 @@
 op: 
-23
+80,
 %0A   
-%7D,%0A   input: %7B%0A      margin: 15,%0A      height: 40,%0A      borderColor: '#16795B',%0A      borderWidth
+   backgroundColor: '#16795b',%0A      alignItems: 'center',%0A      flexGrow: 1,%0A      justifyContent: 'flex-start'%0A   %7D,%0A   input: %7B%0A     height: 40,%0A     width: 300,%0A     backgroundColor: 'rgba(225,225,225,0.2)',%0A     marginBottom
 : 1
+0
 ,%0A
- 
     
@@ -2107,20 +2107,81 @@
  padding
-: 10
+Horizontal: 10,%0A     justifyContent: 'center',%0A     color: '#FFF'
 %0A   %7D,%0A 
@@ -2287,16 +2287,33 @@
 ht: 40,%0A
+      width: 300%0A
    %7D,%0A  
@@ -2342,49 +2342,265 @@
     
- color: 'white',%0A      textAlign: 'center
+textAlign: 'center',%0A     color: '#FFFFFF',%0A     fontWeight: '500',%0A     justifyContent: 'center'%0A   %7D,%0A   buttonContainer: %7B%0A     backgroundColor: '#0e513d',%0A     height: 40,%0A     width: 300,%0A     paddingVertical: 15%0A   %7D,%0A   inputText: %7B%0A     color: '#FFF
 '%0A  

Update form styling to standardize with login.