import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Navigator,
  Image,
  TouchableHighlight,
  TextInput,
  Picker,
} from 'react-native';

import PlayDates from './PlayDates';
import MainScene from './MainScene';
import UserDogs from './UserDogs';

class PlayDateCreate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "",
      playdate: {
        name: "",
        location: "",
        time_day: "",
        description: "",
        frequency: "",
      },
    }
  }

  createGroupPressed() {
    console.log('createGroupPressed');
    let data = {
      method: 'POST',
      body: JSON.stringify({
        name: this.state.name, time_day: this.state.time_day, location: this.state.location, description: this.state.description, user_id: "25"
      }),
      headers: {
        'Accept':       'application/json',
        'Content-Type': 'application/json'
      }
    }
    fetch('http://localhost:3000/playdates', data)
        .then((response) => response.json())  // promise
        .then((responseData) => console.log(responseData))
        .catch((error) => console.log("boo"));
    this.props.navigator.pop();
  }

  componentDidMount() {
    console.log("PlayDateCreate: componentDidMount: " + this.props);
  }

  render() {
    var playdate = this.state.playdate;

    return (
      <View style={styles.container}>
        <Text style={styles.pageTitle}>
          Create your new PlayDate
        </Text>

        <Text style={styles.label}>Group Name:</Text>
        <TextInput
          style={styles.inputText}
          value={this.state.name}
          onChangeText={(text) => this.setState({name: text})}
        />

        <Text style={styles.label}>Location:</Text>
        <TextInput
          style={styles.inputText}
          value={this.state.location}
          onChangeText={(text) => this.setState({location: text})}
        />

        <Text style={styles.label}>Time & Day of Week:</Text>
        <TextInput
          style={styles.inputText}
          value={this.state.time_day}
          onChangeText={(text) => this.setState({time_day: text})}
        />

        <Text style={styles.label}>Description:</Text>
        <TextInput
          style={styles.inputText}
          value={this.state.description}
          onChangeText={(text) => this.setState({description: text})}
        />

        <TouchableHighlight
          style={styles.button}
          onPress={() => this.createGroupPressed()}>
          <Text>Create PlayDate</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 14,
  },
  button: {
    borderWidth: 2,
    borderRadius: 12,
    padding: 10,
    backgroundColor: 'antiquewhite'
  },
  inputText: {
    height: 30,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 16,
    padding: 10,
    backgroundColor: '#EBFAFF',
    marginBottom: 10,
  },
  textArea: {
    height: 100,
  },
  label: {
    fontSize: 14,
  }
});

module.exports = PlayDateCreate;

@@ -65,34 +65,20 @@
 ,%0A  
-StyleSheet,%0A  Text,%0A  View
+AsyncStorage
 ,%0A  
@@ -109,16 +109,51 @@
  Image,%0A
+  StyleSheet,%0A  Text,%0A  TextInput,%0A
   Toucha
@@ -172,27 +172,12 @@
 ,%0A  
-TextInput,%0A  Picker
+View
 ,%0A%7D 
@@ -404,27 +404,25 @@
 is.state
- = 
+=
 %7B%0A      
 text: %22%22
@@ -417,227 +417,284 @@
     
-text: %22%22,%0A      playdate: %7B%0A        name: %22%22,
+userID: false%0A    %7D;%0A  %7D%0A%0A  createGroupPressed() %7B%0A    console.log('createGroupPressed');%0A    // AsyncStorage.getItem(%22userID%22)
 %0A    
+//
     
-location: %22%22,%0A        time_day: %22%22,%0A        description: %22%22,%0A        frequency: %22%22,%0A
+         .then((value) =%3E %7B this.setState( %7B%22userID%22: value%7D ); %7D)%0A    //  
       
-%7D,%0A
     
-%7D%0A  %7D%0A%0A  createGroupPressed() %7B%0A    console.log('createGroupPressed'
+ .done();%0A    console.log('this.state: ' + this.state
 );%0A 
@@ -905,9 +905,9 @@
 : %222
-5
+1
 %22%0A  
@@ -1397,16 +1397,19 @@
 () %7B%0A   
+ //
  var pla

Clean up PlayDateCreate a bit