import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "../../utils/index.js";
import { memo, useEffect, useRef } from "react";
import { CanvasIcon } from "../../utils/icon-registry.js";
import { StyledSearchForm } from "./SearchBox.styles.js";
const SearchBox_SearchBox = /*#__PURE__*/ memo(function({ value, onChange, clear, placeholder = 'Search...', inputRef: externalInputRef, clearButtonRef, onNavigationKeyDown, navigateToFirstItem, activeDescendantId }) {
    const internalRef = useRef(null);
    const inputRef = externalInputRef ?? internalRef;
    useEffect(()=>{
        inputRef.current?.focus();
    }, [
        inputRef
    ]);
    const handleClearButtonKeyDown = (e)=>{
        if ('Tab' === e.key) {
            e.preventDefault();
            inputRef.current?.focus();
            if (!e.shiftKey) navigateToFirstItem?.();
        }
    };
    return /*#__PURE__*/ jsx(StyledSearchForm, {
        autoComplete: "off",
        className: "searchbox-form",
        onSubmit: (e)=>e.preventDefault(),
        children: /*#__PURE__*/ jsxs("div", {
            className: cx("searchbox-container", {
                'has-value': !!value
            }),
            children: [
                /*#__PURE__*/ jsx("span", {
                    className: "searchbox-icon",
                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                        icon: "search",
                        size: 16
                    })
                }),
                /*#__PURE__*/ jsx("input", {
                    ref: inputRef,
                    autoComplete: "off",
                    type: "text",
                    role: "combobox",
                    "aria-controls": "toolbox-listbox",
                    "aria-expanded": true,
                    className: "searchbox-input",
                    placeholder: placeholder,
                    value: value,
                    onChange: (e)=>onChange(e.target.value),
                    onKeyDown: onNavigationKeyDown,
                    "aria-activedescendant": activeDescendantId
                }),
                value && /*#__PURE__*/ jsx("button", {
                    ref: clearButtonRef,
                    type: "button",
                    className: "searchbox-clear",
                    onClick: clear,
                    onKeyDown: handleClearButtonKeyDown,
                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                        icon: "x",
                        size: 16
                    })
                })
            ]
        })
    });
});
export { SearchBox_SearchBox as SearchBox };
