import React, { PropTypes } from 'react';
import Dialog from 'material-ui/Dialog';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import { GoogleMapLoader, GoogleMap, Marker, InfoWindow } from "react-google-maps";

const styles = {
  modal: {
    width: '80%',
    maxWidth: 'none',
  },
  textarea: {
    width: '100%',
  },
};

const HelpLocationModal = (props) =>
  <Dialog
    title="Choose your location"
    open={props.locationModalIsOpened}
    contentStyle={styles.modal}
    actions={[
      <FlatButton
        key="cancelButton"
        label="Cancel"
        primary
        onTouchTap={props.handleLocationDiscard}
      />,
      <FlatButton
        key="saveButton"
        label="Save"
        primary
        onTouchTap={props.handleLocationSave}
      />,
    ]}>
    <GoogleMapLoader
      query={{ libraries: "geometry,drawing,places,visualization" }}
      containerElement={
        <div
          style={{
            width: '100%',
            height: '400px',
          }}
        />
      }
      googleMapElement={
        <GoogleMap
          defaultZoom={18}
          defaultCenter={props.center}
        >
          <Marker
            draggable
            position={props.marker}
            onDragend={props.handleMarkerPositionChanged}
          />

        </GoogleMap>
      }
    />
  </Dialog>;

HelpLocationModal.defaultProps = {
  center: { lat: 59.938043, lng: 30.337157 },
  marker: { lat: 59.938043, lng: 30.337157 },
  zoom: 9,
};

HelpLocationModal.propTypes = {
  center: PropTypes.object,
  handleLocationSave: PropTypes.func.isRequired,
  handleLocationDiscard: PropTypes.func.isRequired,
  handleMarkerPositionChanged: PropTypes.func,
  hideLocationModalAction: PropTypes.func.isRequired,
  locationModalIsOpened: PropTypes.bool.isRequired,
  marker: PropTypes.object,
  zoom: PropTypes.number.isRequired,
};

export default HelpLocationModal;

@@ -183,83 +183,32 @@
 ort 
-%7B GoogleMapLoader, GoogleMap, Marker, InfoWindow %7D from %22react-google-maps%22
+HelpMap from './HelpMap'
 ;%0A%0Ac
@@ -783,135 +783,16 @@
    %3C
-GoogleMapLoader%0A      query=%7B%7B libraries: %22geometry,drawing,places,visualization%22 %7D%7D%0A      containerElement=%7B%0A        %3Cdiv%0A    
+HelpMap%0A
     
@@ -810,20 +810,16 @@
         
-   
- 
 width: '
@@ -825,20 +825,16 @@
 '100%25',%0A
-    
         
@@ -860,82 +860,11 @@
     
-    %7D%7D%0A        /%3E%0A      %7D%0A      googleMapElement=%7B%0A        %3CGoogleMap%0A    
+%7D%7D%0A
     
@@ -892,20 +892,9 @@
     
-    defaultC
+c
 ente
@@ -920,192 +920,101 @@
     
-  %3E%0A          %3CMarker%0A            draggable%0A            position=%7Bprops.marker%7D%0A            onDragend=%7Bprops.handleMarkerPositionChanged%7D%0A          /%3E%0A%0A        %3C/GoogleMap%3E%0A      %7D%0A   
+marker=%7Bprops.marker%7D%0A      draggable%0A      handleDragend=%7Bprops.handleMarkerPositionChanged%7D
  /%3E%0A

Refactor location modal to use HelpMap component.