import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2026 GoodData Corporation
import { useRef } from "react";
import { bem } from "../@ui/@utils/bem.js";
import { UiButton } from "../@ui/UiButton/UiButton.js";
import { UiListbox } from "../@ui/UiListbox/UiListbox.js";
import { Overlay } from "../Overlay/Overlay.js";
const { e } = bem("gd-ui-kit-catalog-item-picker");
export function DateDatasetPickerItem({ dateDatasetOptions, selectedDateDatasetKey, isDropdownOpen, onSelect, onToggleDropdown, listboxId, dateAsLabel, }) {
    const buttonRef = useRef(null);
    const selectedDatasetTitle = dateDatasetOptions.find((o) => o.key === selectedDateDatasetKey)?.title ?? "";
    return (_jsxs("div", { className: e("date-dataset"), children: [
            _jsx("div", { className: e("date-dataset-label"), children: dateAsLabel }), _jsxs("div", { className: e("date-dataset-control"), ref: buttonRef, onMouseDown: (event) => {
                    event.preventDefault();
                }, children: [
                    _jsx(UiButton, { variant: "secondary", size: "small", label: selectedDatasetTitle, iconAfter: isDropdownOpen ? "navigateUp" : "navigateDown", onClick: onToggleDropdown, dataTestId: "s-catalog-item-picker-date-dataset-button" }), isDropdownOpen && buttonRef.current ? (_jsx(Overlay, { alignTo: buttonRef.current, alignPoints: [
                            { align: "bl tl", offset: { x: 0, y: 4 } },
                            { align: "tl bl", offset: { x: 0, y: -4 } },
                        ], closeOnOutsideClick: true, closeOnEscape: true, onClose: onToggleDropdown, children: _jsx("div", { className: e("date-dataset-dropdown"), children: _jsx(UiListbox, { isCompact: true, items: dateDatasetOptions.map((o) => ({
                                    type: "interactive",
                                    id: o.key,
                                    stringTitle: o.title,
                                    data: undefined,
                                })), selectedItemId: selectedDateDatasetKey, onSelect: (item) => {
                                    onSelect(item.id);
                                }, shouldCloseOnSelect: false, ariaAttributes: {
                                    id: `${listboxId}-date-dataset`,
                                    "aria-label": dateAsLabel,
                                }, dataTestId: "s-catalog-item-picker-date-dataset-list" }) }) })) : null] })
        ] }));
}
