import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MuiGeoSuggest from 'material-ui-geosuggest';
import GooglePlaceAutocomplete from 'material-ui-places';

const customContentStyle = {
  width: '100%',
  maxWidth: 'none',
};

class App extends Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      inputValue: ''
    }
  }

  componentWillReceiveProps = (nextProps) => {
    this.setState(Object.assign(this.state, { inputValue: nextProps.inputValue }));
  }

  componentDidMount = () => {
    this.setState(Object.assign(this.state, { inputValue: this.props.inputValue }));
  }


  static propTypes = {
    inputValue: React.PropTypes.object.string,
    onPlaceChange: React.PropTypes.function
  }

  handlePlaceChanges = (place) => {
    if (this.props.onPlaceChange) {
      if (place) {
        let formattedPlace = {
          id: place.id,
          address: place.formatted_address,
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng(),
          name: place.name,
          type: 'google'
        }
        this.props.onPlaceChange(formattedPlace);
      }
    }
  }

  handleChange(event) {
    this.setState({ inputValue: event.target.value });
  }

  render() {
    return (
      <div className="App">
        <MuiThemeProvider>
          <GooglePlaceAutocomplete
            id={"membersAutoSuggest"}
            restrictions={{ country: "us" }}
            style={customContentStyle}
            hintText={this.state.inputValue}
            floatingLabelText={this.state.inputValue}
            onChange={(e) => this.handleChange.bind(this, e)}
            onNewRequest={(r, i) => console.log('New Request', r, i)}
            onUpdateInput={(a, b, c) => console.log('Update Input', a, b, c)}
            fullWidth={true}
          />
        </MuiThemeProvider>
      </div>
    );
  }
}

export default App;