import React from 'react';
import PropTypes from 'prop-types';
import ReactRouterPropTypes from 'react-router-prop-types';
import { withRouter } from 'react-router-dom';

class SearchBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            search: ''
        };
    }
    handleChange = (event) => {
        this.setState({
            search: event.target.value
        });
    }
    onSubmit = (event) => {
        const { history, pathname } = this.props;
        event.preventDefault();
        this.props.onSearch(history, pathname, this.state.search);
        this.setState({
            search: ''
        });
    }
    render() {
        return (<form onSubmit={this.onSubmit}>
                  <input name="search" className="text"
                    placeholder="Search..." value={this.state.search} onChange={this.handleChange} />
                </form>);
    }
}

SearchBox.propTypes = {
    pathname: PropTypes.string.isRequired,
    onSearch: PropTypes.func.isRequired,
    history: ReactRouterPropTypes.history.isRequired
};
export default withRouter(SearchBox);