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

/**
 * @typedef {Object} SearchBoxPropsFields
 * @property {string} pathname
 * @property {function} onSearch
 */

 /**
 * @typedef {import('react-router-dom').RouteComponentProps & SearchBoxPropsFields} SearchBoxProps
 */

/**
 * @param {SearchBoxProps} props
 */
function SearchBox({ onSearch, history, pathname }) {
    /**
     * @type {(React.FormEvent<HTMLFormElement>)}
     */
    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);