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

/**
 * @param {{ pathname: string, onSearch: function, history: import('history').History }} props
 */
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>
    );
}

export default withRouter(SearchBox);