import React from 'react';
import PropTypes from 'prop-types';
import Geosuggest from 'react-geosuggest';
import classNames from 'classnames';
import Location from './Location';

class InputTypeLocation extends React.Component {
  static propTypes = {
    value: PropTypes.object,
    className: PropTypes.string,
    onChange: PropTypes.func.isRequired,
    options: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: props.value || {} };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.value != this.props.value) {
      this.setState({ value: nextProps.value });
    }
  }

  handleChange(value) {
    if (!value) {
      this.setState({ value: {} });
      return this.props.onChange({});
    }
    const label = value.label && value.label.replace(/,.+/, '');
    const location = {
      name: label,
      address: value.gmaps.formatted_address,
      lat: value.location.lat,
      long: value.location.lng,
    };
    this.setState({ value: location });
    return this.props.onChange(location);
  }

  render() {
    const options = this.props.options || {};

    return (
      <div className={classNames('InputTypeLocation', this.props.className)}>
        <style jsx global>
          {`
            .geosuggest {
              font-size: 18px;
              font-size: 1rem;
              position: relative;
              text-align: left;
            }
            .geosuggest__input {
              display: block;
              width: 100%;
              height: 34px;
              padding: 6px 12px;
              font-size: 14px;
              line-height: 1.42857143;
              color: #555;
              background-color: #fff;
              background-image: none;
              border: 1px solid #ccc;
              border-radius: 4px;
            }
            .geosuggest__input:focus {
              border-color: #267dc0;
              box-shadow: 0 0 0 transparent;
            }
            .geosuggest__suggests {
              position: absolute;
              top: 100%;
              left: 0;
              right: 0;
              max-height: 25em;
              padding: 0;
              margin-top: -1px;
              background: #fff;
              border: 2px solid #267dc0;
              border-top-width: 0;
              overflow-x: hidden;
              overflow-y: auto;
              list-style: none;
              z-index: 5;
              -webkit-transition: max-height 0.2s, border 0.2s;
              transition: max-height 0.2s, border 0.2s;
            }
            .geosuggest__suggests--hidden {
              max-height: 0;
              overflow: hidden;
              border-width: 0;
            }

            /**
        * A geosuggest item
        */
            .geosuggest__item {
              font-size: 18px;
              font-size: 1rem;
              padding: 0.5em 0.65em;
              cursor: pointer;
            }
            .geosuggest__item:hover,
            .geosuggest__item:focus {
              background: #f5f5f5;
            }
            .geosuggest__item--active {
              background: #267dc0;
              color: #fff;
            }
            .geosuggest__item--active:hover,
            .geosuggest__item--active:focus {
              background: #ccc;
            }
          `}
        </style>
        <Geosuggest
          onSuggestSelect={event => this.handleChange(event)}
          placeholder={this.props.placeholder}
          {...options}
        />
        <Location location={this.state.value} showTitle={false} />
      </div>
    );
  }
}

export default InputTypeLocation;
