import React__default, { useRef, useEffect } from 'react';
import { I as Icon } from './Icon-es.js';

var styles = {"search":"c4B0WFX6K0o-","searchInput":"AH9-zRHXfpo-","clearSearch":"mymN3p8sKRw-","spinning":"hMjmTEgj6WU-"};

function ComboboxContentSearch(props) {
    const searchRef = useRef(null);
    useEffect(() => {
        if (props.open) {
            setTimeout(() => {
                var _a;
                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            }, 0);
        }
    }, [props.open]);
    return (React__default.createElement("div", { className: styles.search },
        React__default.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__default.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
            React__default.createElement(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);
    }
}

export { ComboboxContentSearch as C };
