content: import React from 'react'
  import fetch from 'isomorphic-fetch'
  import { Link } from 'react-router-dom'
  import debounce from 'debounce-promise'
  import Autosuggest from 'react-autosuggest'
  import get from 'lodash/fp/get'
  
  import config from 'config'
  
  class Home extends React.Component {
    constructor(props) {
      super(props)
  
      this.onChange = this.onChange.bind(this)
      this.fetchData = debounce(this.fetchData.bind(this), 500)
      this.clearData = this.clearData.bind(this)
    }
  
    state = {
      value: '',
      options: [],
    }
  
    onChange(event) {
      if (event.target) this.setState({ value: event.target.value })
    }
  
    fetchData(input) {
      if (!input || input.length < 2) return Promise.resolve({ options: [] })
  
      return fetch(`${config.apiUrl}/v0/search?lyrics=${input.value}&limit=10`)
        .then(res => res.json())
        .then(json => this.setState({ options: json }))
    }
  
    clearData() {
      this.setState({ options: [] })
    }
  
    renderOption(option) {
      return <Link to={`/bhajan/${option.bhajan_id}`}>{option.title}</Link>
    }
  
    render() {
      const inputProps = {
        placeholder: 'Search bhajans...',
        value: this.state.value,
        onChange: this.onChange,
        className: 'search-input form-control',
      }
  
      return [
        <div className="row" key="title">
          <div className="col-lg-12">
            <h1 className="text-center">BhajanDB</h1>
          </div>
        </div>,
        <div className="row" key="search">
          <div className="col-lg-12">
            <Autosuggest
              suggestions={this.state.options}
              onSuggestionsFetchRequested={this.fetchData}
              onSuggestionsClearRequested={this.clearData}
              renderSuggestion={this.renderOption}
              getSuggestionValue={get('title')}
              inputProps={inputProps}
            />
          </div>
        </div>,
      ]
    }
  }
  
  export default Home
  