import React, { Component, PropTypes } from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import _isEmpty from 'lodash/isEmpty';
import AddLocationForm from './AddLocationForm';

const initialState = {
  formData: {
    name: '',
    link: '',
    description: '',
    location: {}
  },
  validationErrors: {}
};

class AddLocationDialog extends Component {
  static propTypes = {
    popupVisible: PropTypes.bool.isRequired,
    addMarker: PropTypes.func.isRequired,
    closePopup: PropTypes.func.isRequired,
  }

  state = { ...initialState }

  updateForm = (property, value) => {
    const newState = { ...this.state };

    newState.formData[property] = value;
    // Hide existing validation error
    if (newState.validationErrors[property] && value) {
      newState.validationErrors[property] = '';
    }

    this.setState(newState);
  }

  // Passes marker data to parent component if form is valid
  addMarker = () => {
    if (this.validateForm()) {
      this.props.addMarker(this.state.formData);
      this.closePopup();
    }
  }

  // Clears state and closes dialog window
  closePopup = () => {
    this.setState(initialState);
    this.props.closePopup();
  }

  validateForm = () => {
    const { name, link, description, location } = this.state.formData;
    const validationErrors = {};

    if (!name) validationErrors.name = 'Name is required';
    if (!link) validationErrors.link = 'Link is required';
    if (!description) validationErrors.description = 'Description is required';
    if (!location.description) validationErrors.location = 'Location is required';

    this.setState({ validationErrors });

    return _isEmpty(validationErrors);
  }

  render() {
    const { popupVisible } = this.props;
    const { formData, validationErrors } = this.state;
    const actions = [
      <FlatButton
        label="Cancel"
        primary
        onTouchTap={this.closePopup}
      />,
      <FlatButton
        label="Add"
        style={{ marginLeft: 8 }}
        primary
        onTouchTap={this.addMarker}
      />
    ];

    return (
      <Dialog
        contentStyle={{ maxWidth: 500 }}
        titleStyle={{ paddingBottom: 0 }}
        title="Add your location"
        actions={actions}
        open={popupVisible}
        onRequestClose={this.closePopup}
      >
        <AddLocationForm
          formData={formData}
          validationErrors={validationErrors}
          onChange={this.updateForm}
        />
      </Dialog>
    );
  }
}

export default AddLocationDialog;

@@ -229,31 +229,50 @@
 ';%0A%0A
-const initialState =
+function getInitialState() %7B%0A  return
  %7B%0A
+  
   fo
@@ -285,16 +285,18 @@
 : %7B%0A    
+ 
+ 
 name: ''
@@ -293,24 +293,26 @@
   name: '',%0A
+  
     link: ''
@@ -309,24 +309,26 @@
   link: '',%0A
+  
     descript
@@ -340,16 +340,18 @@
 '',%0A    
+  
 location
@@ -359,15 +359,19 @@
  %7B%7D%0A
+  
   %7D,%0A  
+ 
+ 
 vali
@@ -387,18 +387,22 @@
 ors: %7B%7D%0A
+  %7D;%0A
 %7D
-;
 %0A%0Aclass 
@@ -611,14 +611,12 @@
 e = 
-%7B ...i
+getI
 niti
@@ -622,18 +622,18 @@
 ialState
- %7D
+()
 %0A%0A  upda
@@ -1212,17 +1212,20 @@
 etState(
-i
+getI
 nitialSt
@@ -1223,24 +1223,26 @@
 InitialState
+()
 );%0A    this.

Fix form data not resetting when closing dialog