import React from 'react'
import request from 'superagent'
import Autocomplete from 'react-autocomplete'

const styles = {

}

export default class Search extends React.Component {

  static propTypes = {
    defaultValue: React.PropTypes.string.isRequired,
  }

  state = {
    locations: [],
    loading: false,
    value: '',
  }

  getItemValue = item => item.name

  handleSelect = (value, item) => {
    this.setState({ value })
    Places.mapView.centerTo(item.lat, item.lon)
  }

  handleChange = (event, value) => {
    this.setState({ value, loading: true })
    let locations = []
    request
      .get('/api/v1/places/search')
      .query({ name: value })
      .end((err, res) => {
        if (err) {
          this.setState({ loading: false })
        } else {
          locations = locations.concat(res.body.map(l => ({
            id: l.id,
            name: l.name,
            lat: l.latitude,
            lon: l.longitude,
            type: l.type.toLowerCase(),
          })))
          this.setState({ loading: false, locations })
        }
      })
    request
      .get('/api/v1/geocode')
      .query({ location: value })
      .end((err, res) => {
        if (err) {
          this.setState({ loading: false })
        } else {
          locations = locations.concat(res.body.map(l => ({
            name: l.attrs.display_name,
            lat: l.attrs.lat,
            lon: l.attrs.lon,
            type: 'location',
          })))
          this.setState({ loading: false, locations })
        }
      })
  }

  renderItems = (item, isHighlighted) => (
    <div
      style={isHighlighted ? styles.highlightedItem : styles.item}
      key={item.id}
      className={`searchresult-${item.type}`}
      id={item.id}
    >
      {item.name}
    </div>
  )

  render() {
    return (
      <Autocomplete
        inputProps={{
          className: 'search-input',
          placeholder: this.props.defaultValue,
        }}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
        getItemValue={this.getItemValue}
        value={this.state.value}
        items={this.state.locations}
        renderItem={this.renderItems}
      />
    )
  }
}

@@ -1105,16 +1105,29 @@
 /geocode
+/autocomplete
 ')%0A     
@@ -1140,23 +1140,45 @@
 y(%7B 
-location: value
+text: value, layers: 'address,street'
  %7D)%0A
@@ -1324,32 +1324,41 @@
 concat(res.body.
+features.
 map(l =%3E (%7B%0A    
@@ -1369,64 +1369,62 @@
     
-name: l.attrs.display_name,%0A            lat: l.attr
+type: 'location',%0A            name: l.propertie
 s.la
-t
+bel
 ,%0A  
@@ -1438,53 +1438,81 @@
    l
-on
+at
 : l.
-attrs.lon,%0A            type: 'location'
+geometry.coordinates%5B1%5D,%0A            lon: l.geometry.coordinates%5B0%5D
 ,%0A  

Add mapzen autocomplete to search box.