import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2026 GoodData Corporation
import { useMemo } from "react";
import cx from "classnames";
import { bem } from "../@ui/@utils/bem.js";
import { UiButton } from "../@ui/UiButton/UiButton.js";
import { UiButtonSegmentedControl } from "../@ui/UiButtonSegmentedControl/UiButtonSegmentedControl.js";
import { UiCheckbox } from "../@ui/UiCheckbox/UiCheckbox.js";
import { UiIcon } from "../@ui/UiIcon/UiIcon.js";
import { UiIconButton } from "../@ui/UiIconButton/UiIconButton.js";
import { UiListbox } from "../@ui/UiListbox/UiListbox.js";
import { UiSubmenuHeader } from "../@ui/UiSubmenuHeader/UiSubmenuHeader.js";
import { UiTooltip } from "../@ui/UiTooltip/UiTooltip.js";
import { Input } from "../Form/Input.js";
import { testIds } from "./messages.js";
const { e } = bem("gd-ui-kit-catalog-item-picker");
/**
 * Returns icon type for a catalog item type.
 */
export function getTypeIcon(type) {
    switch (type) {
        case "metric":
            return { icon: "metric" };
        case "date":
            return { icon: "date" };
        default:
            return { icon: "ldmAttribute" };
    }
}
export function CatalogItemPickerHeader({ title, onBack, onClose, backAriaLabel, closeAriaLabel, }) {
    return (_jsx(UiSubmenuHeader, { title: title, onBack: onBack, onClose: onClose, backAriaLabel: backAriaLabel, closeAriaLabel: closeAriaLabel, height: "medium" }));
}
export function CatalogItemPickerSearch({ variant, value, onChange, onEscKeyPress, placeholder, ariaLabel, }) {
    return (_jsx("div", { className: e("search", { variant }), "data-testid": testIds.search, children: _jsx(Input, { className: e("search-input", { variant }), value: value, onChange: onChange, onEscKeyPress: onEscKeyPress, placeholder: placeholder, autofocus: true, clearOnEsc: true, isSearch: true, isSmall: true, accessibilityConfig: {
                ariaLabel,
            } }) }));
}
export function CatalogItemPickerTabs({ variant, itemTypes, effectiveType, getAriaLabel, onChange, }) {
    return (_jsx("div", { className: e("type-filter", { variant }), "data-testid": testIds.typeFilter, children: _jsx(UiButtonSegmentedControl, { layout: "fill", children: itemTypes.map((type, index) => {
                const { icon } = getTypeIcon(type);
                return (_jsx("span", { className: e("type-icon-wrapper", { type }), children: _jsx(UiIconButton, { icon: icon, iconColor: "currentColor", size: "small", variant: "secondary", isActive: effectiveType === type, onClick: () => onChange(type), accessibilityConfig: {
                            ariaLabel: getAriaLabel(type),
                        }, dataTestId: `${testIds.tab}-${index}` }) }, type));
            }) }) }));
}
// ============================================================================
// CatalogItemPickerList
// ============================================================================
function CatalogItemPickerItemComponent({ item, isFocused, isCompact, onSelect, variant, }) {
    const { item: pickerItem, isSelected } = item.data;
    const { icon } = getTypeIcon(pickerItem.type);
    return (_jsxs("div", { className: cx("gd-ui-kit-listbox__item", e("item", { isSelected, variant }), {
            "gd-ui-kit-listbox__item--isFocused": isFocused,
            "gd-ui-kit-listbox__item--isCompact": isCompact,
        }), onClick: onSelect, children: [
            _jsx("span", { className: e("item-checkbox"), onClick: (event) => {
                    event.stopPropagation();
                }, children: _jsx(UiCheckbox, { checked: isSelected, tabIndex: -1, stopPropagation: true, onChange: (event) => {
                        onSelect(event);
                    } }) }), _jsx("span", { className: e("type-icon-wrapper", { type: pickerItem.type }), children: _jsx(UiIcon, { type: icon, size: 16, color: "currentColor" }) }), _jsx("span", { className: e("item-title"), children: pickerItem.title }), pickerItem.sequenceNumber ? (_jsx("span", { className: e("item-sequence"), children: pickerItem.sequenceNumber })) : null] }));
}
function CatalogItemPickerSingleSelectItem({ item, isFocused, isCompact, onSelect, variant, }) {
    const { icon } = getTypeIcon(item.data.item.type);
    return (_jsxs("div", { className: cx("gd-ui-kit-listbox__item", e("item", { isSelected: false, variant }), {
            "gd-ui-kit-listbox__item--isFocused": isFocused,
            "gd-ui-kit-listbox__item--isCompact": isCompact,
        }), onClick: onSelect, children: [
            _jsx("span", { className: e("type-icon-wrapper", { type: item.data.item.type }), children: _jsx(UiIcon, { type: icon, size: 16, color: "currentColor" }) }), _jsx("span", { className: e("item-title"), children: item.data.item.title }), item.data.item.sequenceNumber ? (_jsx("span", { className: e("item-sequence"), children: item.data.item.sequenceNumber })) : null] }));
}
export function CatalogItemPickerList({ variant, listboxItems, isMultiSelect, maxListHeight, listboxId, ariaLabel, shouldShowEmptyStateMessage, emptyMessage, onSelect, }) {
    const InteractiveItemComponent = useMemo(() => {
        return isMultiSelect
            ? (props) => (_jsx(CatalogItemPickerItemComponent, { ...props, variant: variant }))
            : (props) => (_jsx(CatalogItemPickerSingleSelectItem, { ...props, variant: variant }));
    }, [isMultiSelect, variant]);
    return (_jsx("div", { className: e("list", { variant }), children: shouldShowEmptyStateMessage ? (_jsx("div", { className: e("empty", { variant }), children: emptyMessage })) : (_jsx(UiListbox, { items: listboxItems, onSelect: onSelect, shouldCloseOnSelect: false, isCompact: true, maxHeight: maxListHeight, InteractiveItemComponent: InteractiveItemComponent, ariaAttributes: {
                id: listboxId,
                "aria-label": ariaLabel,
            }, dataTestId: testIds.list })) }));
}
export function CatalogItemPickerFooter({ variant, isAddDisabled, onClose, onAdd, cancelLabel, addLabel, addTooltip, }) {
    return (_jsxs("div", { className: e("footer", { variant }), children: [
            _jsx(UiButton, { label: cancelLabel, variant: "secondary", size: "small", onClick: onClose, dataTestId: testIds.cancel }), _jsx(UiTooltip, { content: addTooltip ?? "", disabled: !isAddDisabled, triggerBy: ["hover", "focus"], anchor: _jsx("span", { className: e("add-button"), children: _jsx(UiButton, { label: addLabel, variant: "primary", size: "small", onClick: onAdd, isDisabled: isAddDisabled, dataTestId: testIds.add }) }) })
        ] }));
}
