'use strict';

var React = require('react');
var Icon = require('./Icon-cjs.js');

var styles = {"search":"_74R4ICUNw-M-","searchInput":"icUzhma-GJs-","clearSearch":"ePmiDYZ2boo-","spinning":"_-2bwJZqt-do-"};

function FilterPickerContentSearch(props) {
    const searchRef = React.useRef(null);
    React.useEffect(() => {
        if (props.open) {
            setTimeout(() => {
                var _a;
                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            }, 0);
        }
    }, [props.open]);
    return (React.createElement("div", { className: styles.search },
        React.createElement("input", { type: "search", ref: searchRef, className: styles.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
        props.searchValue && (React.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-FilterPicker-Content-Search-Clear", "aria-label": "Clear search" },
            React.createElement(Icon.Icon, { name: "remove", size: "small" })))));
    function clearSearch() {
        var _a;
        props.setSearchValue("");
        props.handleSearchChange("");
        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    }
    function handleSearch(event) {
        props.setSearchValue(event.currentTarget.value);
        props.handleSearchChange(event.currentTarget.value);
    }
}

exports.FilterPickerContentSearch = FilterPickerContentSearch;
