'use strict';

import PfText from './PfText'
import PfTextInput from './PfTextInput'
import PfButton from './PfButton'
import Constants from './Constants'

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicator,
  ScrollView
} from 'react-native';

export default class RequestCollectionScreen extends Component {

  constructor(props) {
    super(props);
    this.state = {
      name: "Pfandgeber",
      isAdding: false
    }
  }

  render() {

    const buttonOrSpinner = this.state.isAdding ?
      ( <ActivityIndicator size='large'/> ) :
      ( <PfButton title="Add"/> );

    return (
      <ScrollView>
        <View style={styles.vbox}>
          <PfText>
            Find someone to collect your bottles and cans.
          </PfText>
          <PfTextInput
              placeholder='Your name' />
          <PfTextInput
              placeholder='Your address' />
          <PfTextInput
              placeholder='Number of bottles' />
          {buttonOrSpinner}
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  vbox: {
    flexDirection: 'column',
    alignItems: 'stretch',
    padding: 10,
    marginTop: 20
  },
});

@@ -474,16 +474,57 @@
 geber%22,%0A
+      address: %22%22,%0A      numBottles: %22%22,%0A
       is
@@ -919,16 +919,81 @@
 ur name'
+%0A              onChangeText=%7Btext =%3E this.setState(%7Bname: text%7D)%7D
  /%3E%0A    
@@ -1051,16 +1051,84 @@
 address'
+%0A              onChangeText=%7Btext =%3E this.setState(%7Baddress: text%7D)%7D
  /%3E%0A    
@@ -1191,16 +1191,87 @@
 bottles'
+%0A              onChangeText=%7Btext =%3E this.setState(%7BnumBottles: text%7D)%7D
  /%3E%0A    

Store inputted text in the local state