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

import * as actions from './nameSearch.actions'

class NameSearchQuery extends Component {
  state = {
    value: null
  }

  handleInput(value) {
    this.setState({ q: value })
    if (value.length > 2) {
      this.props.actions.search(this.props.payload, value)
    }
  }

  render() {
    return (
      <div className='query'>
        <h2>Find Your Name</h2>
        <h3>Searching {13456} identities</h3>
        <p>
          {'Enter your name to see if you were included in this dataset..'}
        </p>
        <input
          type="text"
          class="q"
          placeholder="Enter your name"
          value={this.state.q}
          onInput={e => this.handleInput(e.target.value)}
        />
      </div>
    )
  }
}

const mapStateToProps = state => ({
  result: state.nameSearch.result,
  options: state.nameSearch.options,
})

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({ ...actions }, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(NameSearchQuery)