import React, { Component } from 'react';
import NavigationBar from 'react-native-navbar'
import { Button } from 'native-base';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  View,
  ScrollView,
  ReactNative,
  findNodeHandle,
  SegmentedControlIOS,
  Image,
  Switch,
  DatePickerIOS,
  Navigator,
  TouchableHighlight,
  AlertIOS,
  AsyncStorage,
} from 'react-native'

class Registration extends Component {
  constructor(props) {
    super(props);
    this.state = {first_name: '', last_name: '', photo_url: '', payment_url: ''};
  }

  navigate(routeName) {
    this.props.navigator.push({
      name: routeName
    });
  }

  inputFocused(refName) {
    setTimeout(() => {
      let scrollResponder = this.refs.scrollView.getScrollResponder();
      scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
        findNodeHandle(this.refs[refName]),
        110, //additionalOffset
        true
      );
    }, 50);
  }

  render() {
    return (
      <View>
        <NavigationBar
            title={{ title:  'TipTap!' , tintColor:  'black' , }}
            leftButton={{ title: 'Back', tintColor: 'black', handler: this.navigate.bind(this, "main")} }
            style={{ backgroundColor:  "#D3D3D3" , }}
            statusBar={{ tintColor:  "white" , }}
        />

        <ScrollView style={{padding: 50}} ref='scrollView'>
        <TextInput
         ref='FirstName'
         style={{fontSize: 20, height: 50, borderColor: 'gray', borderWidth: 2, padding: 3, marginTop: 1}}
         placeholder=" First Name"
         onChangeText={(text) => this.setState({first_name: text})}
         onSubmitEditing={(event) => {
           this.refs.LastName.focus();
         }}
       />
       <TextInput
         ref='LastName'
         style={{fontSize: 20, height: 50, borderColor: 'gray', borderWidth: 2, padding: 3, marginTop: 1}}
         placeholder=" Last Name"
         onChangeText={(text) => this.setState({last_name: text})}
         onSubmitEditing={(event) => {
           this.refs.PhotoUrl.focus();
         }}
         onFocus={this.inputFocused.bind(this, 'LastName')}
        />
       <TextInput
         ref='PhotoUrl'
         style={{fontSize: 20, height: 50, borderColor: 'gray', borderWidth: 2, padding: 3, marginTop: 1}}
         placeholder=" Photo URL"
         onChangeText={(text) => this.setState({photo_url: text})}
         onSubmitEditing={(event) => {
           this.refs.PaymentUrl.focus();
         }}
         onFocus={this.inputFocused.bind(this, 'PhotoUrl')}
         />
       <TextInput
         ref='PaymentUrl'
         style={{fontSize: 20, height: 50, borderColor: 'gray', borderWidth: 2, padding: 3, marginTop: 1, marginBottom: 1}}
         placeholder=" Payment URL"
         onChangeText={(text) => this.setState({payment_url: text})}
         onFocus={this.inputFocused.bind(this, 'PaymentUrl')}
       />

          <Button large success block
            onPress={this.registerTippee.bind(this)}>
            Submit Registration
          </Button>

        </ScrollView>
      </View>
    );
  }

  registerTippee() {
    var that = this
    fetch("https://tiptap-api.herokuapp.com/tippees", {
      method: "POST",
      headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }, body: JSON.stringify({tippee: that.state})})
    .then((response) => response.json())
    .then((responseJson) => {
      AsyncStorage.setItem(
        'beacons',
        JSON.stringify(responseJson.beacons),
        () => that.navigate("active")
      )
    })
    .done();
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default Registration

@@ -202,16 +202,25 @@
 llView,%0A
+  Modal,%0A
   ReactN
@@ -548,16 +548,32 @@
 _url: ''
+, loading: false
 %7D;%0A  %7D%0A%0A
@@ -3063,24 +3063,464 @@
 ScrollView%3E%0A
+        %3CModal%0A          animationType=%7B'fade'%7D%0A          transparent=%7B'true'%7D%0A          visible=%7B(this.state && this.state.loading)%7D%0A        %3E%0A          %3CView style=%7B%7B%0A            flex: 1,%0A            backgroundColor: '#f5fcff',%0A            alignItems: 'center',%0A            justifyContent: 'center',%0A            padding: 20,%0A          %7D%7D%3E%0A            %3CText%3E%0A              Loading...%0A            %3C/Text%3E%0A          %3C/View%3E%0A        %3C/Modal%3E%0A
       %3C/View
@@ -3517,24 +3517,24 @@
     %3C/View%3E%0A
-
     );%0A  %7D%0A%0A
@@ -3574,16 +3574,51 @@
  = this%0A
+    this.setState(%7Bloading: true%7D)%0A
     fetc
@@ -3874,16 +3874,16 @@
 json())%0A
-
     .the
@@ -3900,24 +3900,62 @@
 eJson) =%3E %7B%0A
+      that.setState(%7Bloading: false%7D)%0A
       AsyncS

Add 'loading' modal during api call