{"size": 1383, "ext": "js", "max_stars_repo_path": "app/components/editEvent/location.js", "max_stars_repo_name": "sham-sheer/edison-mail-calendar", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "app/components/editEvent/location.js", "max_issues_repo_name": "sham-sheer/edison-mail-calendar", "max_issues_repo_issues_event_min_datetime": "2020-09-04T19:19:03.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-25T18:41:03.000Z", "max_forks_repo_path": "app/components/editEvent/location.js", "max_forks_repo_name": "sham-sheer/edison-mail-calendar", "max_forks_repo_forks_event_min_datetime": "2019-04-10T22:01:09.000Z", "max_forks_repo_forks_event_max_datetime": "2019-04-10T22:01:09.000Z"}
{"max_stars_count": null, "max_issues_count": 8, "max_forks_count": 1, "avg_line_length": 21.2769230769, "max_line_length": 79, "alphanum_fraction": 0.575560376}
/* global google */

import React from 'react';
import AddressDetails from './addressDetails';

class Location extends React.Component {
  constructor(props) {
    super(props);
    this.autocompleteInput = React.createRef();
    this.autocomplete = null;
    this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
    this.state = {
      place: ''
    };
  }

  componentDidMount() {
    const { props } = this;

    // this.autocomplete = new google.maps.places.Autocomplete(
    //   this.autocompleteInput.current,
    //   { types: ['geocode'] }
    // );
    // this.autocomplete.setFields([
    //   'address_component',
    //   'geometry',
    //   'icon',
    //   'name'
    // ]);
    // this.autocomplete.addListener('place_changed', this.handlePlaceChanged);
    // this.setState({
    //   place: props.place
    // });
  }

  handlePlaceChanged() {
    const { props } = this;
    const place = this.autocomplete.getPlace();

    props.onPlaceChanged({
      name: props.name,
      value: place
    });
  }

  render() {
    const { state } = this;

    return (
      <div>
        <h5>Location</h5>
        <input
          ref={this.autocompleteInput}
          id="autocomplete"
          placeholder="Enter your address"
          type="text"
        />
        <AddressDetails place={state.place} />
      </div>
    );
  }
}

export default Location;
