import React, { createRef, useEffect } from "react";
import { useSearch } from "../../hooks/useSearch";
/**
 * This is the search input field for the search menu. It will trigger calls to the searchMenu via the hook passed in
 * through props.
 */
export const SearchInput = () => {
    // the ref is needed so we can provide focus after clearing the search.
    const textInputRef = createRef();
    const { updateQuery, resetSearch, searchQuery } = useSearch();
    const onClearSearchClicked = () => resetSearch();
    const handleInputChange = (e) => updateQuery(e.target.value);
    useEffect(() => {
        // Focus the input when the search query is cleared regardless of how it is cleared
        if (searchQuery === "") {
            textInputRef.current.focus();
        }
    }, [searchQuery]);
    return (React.createElement("div", { className: "menu-item no-hover" },
        React.createElement("div", { className: "menu-item-row" },
            React.createElement("span", { className: "search-icon-wrapper" },
                React.createElement("i", { className: "ff-search" })),
            React.createElement("input", { ref: textInputRef, type: "text", placeholder: "Search", className: "search-input", value: searchQuery || "", autoFocus: true, onChange: handleInputChange }),
            searchQuery && (React.createElement("span", { className: "clear-search menu-item-row-push-right", onClick: onClearSearchClicked },
                React.createElement("i", { className: "ff-close" }))))));
};
//# sourceMappingURL=SearchInput.js.map