import React, { Component } from 'react'
import { connect } from 'react-redux'

class FilterByKeyword extends Component {

  constructor (props) {
    super(props)
    // Map over each Item and extract name, author and key
    const items_data = this.props.items.map(
      (item, index) => {
        return {
          name: item.name,
          author: item.author,
          key: index
        }
      }
    )

    this.state = {
      term: '',
      result_orig: '',
      initial_items: items_data,
      result_data: null
    }

    this.onInputChange = this.onInputChange.bind(this)
    this.filterData = this.filterData.bind(this)
  }

  filterData (searchterm) {

    let results = this.state.initial_items.filter(
      // Return the item if the search term is  contained in the
      // 'name' or 'author' property
      (item) => {
        return item.name.toLowerCase().search(searchterm.toLowerCase()) !== -1 ||
          item.author.toLowerCase().search(searchterm.toLowerCase()) !== -1 
      }
    )
    //if (searchterm.length > 0) {
     // console.log('setting to search results')
     // this.setState({result_data: results, result_orig: false})
    //} else {
    //  console.log('setting to orig items')
    //  this.setState({result_data: this.props.items, result_orig: false})
    //}
    this.props.setSearchResults(results)
  
  }

  onInputChange (event) {
    this.setState({term: event.target.value})
    this.filterData(event.target.value)
    console.log('onInputChange ', this.state.result_data)
    //this.props.setSearchResults(this.state.result_data)
  }

  render () {
    /*
    let results
    if (this.state.result_orig) {
      results = this.state.result_orig
    } else {
      if (this.state.result_data) {
        let items_list = this.state.result_data.map(
        (item, index) => {
          return <li key={index}>{item.author} - {item.name}</li>
        }
      )
        results = <ul>{items_list}</ul>
      }
    }
    */
    return (
      <div>
        <form onSubmit= {this.onFormSubmit} className="input-group">
          <input
          placeholder= "Find a resource - search by author, title or keyword"
          className = "search-input"
          value={this.state.term}
          onChange={this.onInputChange}/>

        </form>
        <br />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return { 'items': state.items }
}

export default connect(mapStateToProps)(FilterByKeyword)

@@ -1015,301 +1015,8 @@
   )%0A
-    //if (searchterm.length %3E 0) %7B%0A     // console.log('setting to search results')%0A     // this.setState(%7Bresult_data: results, result_orig: false%7D)%0A    //%7D else %7B%0A    //  console.log('setting to orig items')%0A    //  this.setState(%7Bresult_data: this.props.items, result_orig: false%7D)%0A    //%7D%0A
     
@@ -1056,11 +1056,8 @@
 ts)%0A
-  %0A
   %7D%0A
@@ -1175,510 +1175,24 @@
 )%0A  
-  console.log('onInputChange ', this.state.result_data)%0A    //this.props.setSearchResults(this.state.result_data)%0A  %7D%0A%0A  render () %7B%0A    /*%0A    let results%0A    if (this.state.result_orig) %7B%0A      results = this.state.result_orig%0A    %7D else %7B%0A      if (this.state.result_data) %7B%0A        let items_list = this.state.result_data.map(%0A        (item, index) =%3E %7B%0A          return %3Cli key=%7Bindex%7D%3E%7Bitem.author%7D - %7Bitem.name%7D%3C/li%3E%0A        %7D%0A      )%0A        results = %3Cul%3E%7Bitems_list%7D%3C/ul%3E%0A      %7D%0A    %7D%0A    */
+%7D%0A%0A  render () %7B
 %0A   

Remove console logs