import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useEffect, useRef } from "react";
import cx from "classnames";
import { UiFocusManager } from "../@ui/UiFocusManager/UiFocusManager.js";
import { Button } from "../Button/Button.js";
import { Overlay } from "../Overlay/Overlay.js";
import { useIdPrefixed } from "../utils/useId.js";
import { useHeaderSearch } from "./headerSearchContext.js";
const ALIGN_POINTS = [{ align: "br tr" }];
export function HeaderSearchButton({ children, title }) {
    const { isOpen, toggleOpen } = useHeaderSearch();
    const buttonRef = useRef(null);
    // Handle Cmd+K and Ctrl+K shortcuts
    useEffect(() => {
        const shortcutHandler = (event) => {
            if (event.key === "k" && (event.ctrlKey || event.metaKey)) {
                toggleOpen();
            }
        };
        if (!isOpen) {
            document.addEventListener("keydown", shortcutHandler);
        }
        return () => {
            document.removeEventListener("keydown", shortcutHandler);
        };
    }, [isOpen, toggleOpen]);
    const dropdownId = useIdPrefixed("search-dropdown");
    const classNames = cx("gd-header-measure", "gd-header-button", "gd-header-search", {
        "is-open": isOpen,
    });
    return (_jsxs(Button, { title: title, className: classNames, onClick: toggleOpen, accessibilityConfig: {
            isExpanded: isOpen,
            popupId: dropdownId,
        }, ref: buttonRef, children: [
            _jsx("span", { className: "gd-icon-header-search-button" }), _jsx("span", { className: "gd-header-search-label", children: title }), isOpen ? (_jsx(Overlay, { isModal: false, alignTo: ".gd-header-search", alignPoints: ALIGN_POINTS, resizeObserverThreshold: 0.2, closeOnEscape: true, closeOnOutsideClick: true, closeOnParentScroll: false, closeOnMouseDrag: false, onClose: toggleOpen, ignoreClicksOnByClass: [".gd-bubble"], children: _jsx(UiFocusManager, { enableFocusTrap: true, enableAutofocus: true, enableReturnFocusOnUnmount: { returnFocusTo: buttonRef }, children: _jsx("div", { id: dropdownId, className: "gd-dialog gd-dropdown overlay gd-header-search-dropdown", children: children }) }) })) : null] }));
}
