// src/screens/home/containers/Search.js
import React from 'react';
import { connect } from 'react-redux'
import Form from 'react-bootstrap/Form'
import { getBooks } from '../actions'

const Search = ({query, onInputChange}) => {
  const handleOnSubmit = (e) => {
    e.preventDefault();
  }
  return (
    <div className="search-books">
      <Form className="search-books--form" onSubmit={handleOnSubmit}>
        <Form.Group>
          <Form.Control
            type="text"
            placeholder="Harry Potter, Food and Love"
            onChange={(e) => onInputChange(e.target.value)}
            value={query}
          />
          <Form.Text className="text-muted">
            Search the world's most comprehensive index of full-text books.
          </Form.Text>
        </Form.Group>
      </Form>
    </div>
  )
}

const mapStateToProps = state => ({
  query: state.books.query
})
const mapDispatchToProps = dispatch => ({
  onInputChange = (query) => dispatch(getBooks(query))
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Search);