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

function SearchBox({ onSearch, history, pathname }) {
    let onSubmit = (event) => {
        event.preventDefault();
        onSearch(history, pathname, formState.values.search);
    }
    const [formState, { text }] = useFormState();
    return (
        <form onSubmit={onSubmit}>
            <input name="search" className="text"
                placeholder="Search..." value={ formState.values.search } {...text('search')} />
        </form>
    );
}

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