import React from 'react';
import PropTypes from 'prop-types';
import { Trans, translate } from 'react-i18next';
import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete';
import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap';

class SubsAutocomplete extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      address: '',
    };
  }

  onChange = (address) => { this.setState({ address }); }

  handleSelect = (address) => {
    const self = this;
    geocodeByAddress(address)
      .then((results) => getLatLng(results[0]))
      .then(({ lat, lng }) => {
        // console.log('Success Yay', { lat, lng })
        // const newState = update(this.state, {$merge: {lat: lat, lng: lng}});
        // console.log(newState);
        // this.setState(newState);
        self.props.onChange({lat: lat, lng: lng});
        // console.log(this.state);
      })
      .catch(error => {
        console.log(error);
        if (error === 'ZERO_RESULTS') {
          console.log("No results");
        }
      });
  }

  render() {
    // https://www.npmjs.com/package/react-places-autocomplete
    // https://github.com/kenny-hibino/react-places-autocomplete/issues/103
    const myStyles = {
      autocompleteContainer: {
        paddingBottom: '20px',
        backgroundSize: 'auto 12px',
        backgroundPosition: 'bottom left 10px',
        backgroundRepeat: 'no-repeat',
        backgroundImage: "url('https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png')",
      },
    }

    // http://simplelineicons.com/
    const AutocompleteItem = ({ formattedSuggestion }) => (
      <div className="suggestion-item">
        <i className="icons icon-location-pin suggestion-icon"/>{' '}
        <strong>{formattedSuggestion.mainText}</strong>{' '}
        <small className="text-muted">{formattedSuggestion.secondaryText}</small>
      </div>)

    return (
      <form>
        <FormGroup>
          <ControlLabel>
            <Trans parent="span">Indícanos la posición a vigilar (por ej. tu pueblo, una calle, etc):</Trans>
          </ControlLabel>
          <PlacesAutocomplete
              styles={myStyles}
              autocompleteItem={AutocompleteItem}
              classNames={{
                root: 'form-group',
                input: 'form-control',
                autocompleteContainer: 'autocomplete-container'}}
              googleLogo={false}
              highlightFirstSuggestion={true}
              onSelect={(address) => this.handleSelect(address)}
              onEnterKeyDown={(address) => this.handleSelect(address)}
              options={{
                // location: new google.maps.LatLng(-34, 151),
                // radius: 2000,
                // type: ['address'],
                language: this.props.i18n.language
              }}
              inputProps={
                {
                  value: this.state.address,
                  onChange: (address) => this.onChange(address),
                  placeholder: this.props.t("Escribe aquí un lugar "),
                  onBlur:() => { /* console.log('Blur event!'); */ },
                  onFocus:() => { /* console.log('Focused!'); */ },
                  autoFocus: this.props.focusInput
                }} />
          <HelpBlock><Trans parent="span">También puedes seleccionar el lugar en el mapa arrastrando el puntero naranja.</Trans></HelpBlock>
        </FormGroup>
      </form>
    )
  }
}

SubsAutocomplete.propTypes = {
  focusInput: PropTypes.bool.isRequired
};

export default translate([], { wait: true }) (SubsAutocomplete);