import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Dialog, FlatButton, RaisedButton,
  Step,
  StepLabel,
  Stepper,
  IconButton,
  Paper
} from "material-ui";
import Maps from "./maps";

@inject('appstate')
@observer
export default class MapDialog extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      stepIndex: 0,
      finished: false,
      openedDialog: false,
      openMaps : false,
      formData: {},
      errorMessage: '',
      default:{
        is_shipment : true,
        is_default : true
      }
    };
    this.mapHeight= '500px';
    this.defaultState = Object.assign({}, this.state);
    this.globalUI = props.appstate.globalUI;
    this.userAddress = props.appstate.userAddress;
  }

  componentDidMount(){
    this.setState({
      stepIndex:0
    });
  }

  save = () => {
    this.props.onClose();
  }

  handleClose = ()=>{
    if(this.props.mode != 'update'){
      this.userAddress.setGeoData({
        geoaddress : null,
        lat : null,
        lng : null
      })
    }
    this.props.onClose();
  }

  componentDidUpdate() {
  }

  render() {

    const {mapHeight} = this;

    const title =
      <div>
        <h4 style={{
          fontSize: 26,
          marginBottom: 0,
          marginTop: 0,
          fontWeight: 500,
          color: "black"
        }}>Pin Location</h4>
      </div>
    ;

    return (
      <div>
        <Dialog
          title={<div>
            <div>{title}</div>
          </div>}
          titleStyle={{paddingBottom: 10}}
          modal={false}
          actions={<div style={{marginTop: 12}}>
            <FlatButton
              label={"Back"}
              style={{marginRight: 10}}
              primary={true}
              onClick={() =>this.handleClose()}
            />
            <RaisedButton
              label={"Save"}
              style={{marginRight: 10}}
              primary={true}
              onClick={() =>this.save()}/>
            
          </div>}
          autoScrollBodyContent={true}
          repositionOnUpdate={true}
          open={this.props.openMaps}
          onRequestClose={this.handleClose}
          paperClassName={'radius6'}
          contentClassName={'marketplace-dialog-small'}
        >
          <div style={{marginTop: 20}}>
            <Maps/>
          </div>
        </Dialog>

      
      </div>
    )
  }
}
