import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useRef } from "react";
import cx from "classnames";
import { FormattedMessage, useIntl } from "react-intl";
import { AI_OPERATOR, AI_OPERATORS } from "@gooddata/sdk-ui-ext";
import { Dropdown, DropdownButton, SingleSelectListItem, UiListbox, } from "@gooddata/sdk-ui-kit";
import { OPERATORS } from "../constants.js";
import { useOperators } from "../hooks/useOperators.js";
export function AlertComparisonOperatorSelect(props) {
    const { measure, selectedComparisonOperator, onComparisonOperatorChange, selectedRelativeOperator, onRelativeOperatorChange, selectedAiOperator, onAnomalyDetectionChange, overlayPositionType, id, closeOnParentScroll, enableAnomalyDetectionAlert, } = props;
    const selectedComparisonItem = selectedComparisonOperator
        ? OPERATORS.find((option) => option.id === selectedComparisonOperator)
        : undefined;
    const selectedRelativeItem = selectedRelativeOperator
        ? OPERATORS.find((option) => option.id === `${selectedRelativeOperator[1]}.${selectedRelativeOperator[0]}`)
        : undefined;
    const selectedAiItem = selectedAiOperator
        ? OPERATORS.find((option) => option.id === `${AI_OPERATOR}.${AI_OPERATORS.ANOMALY_DETECTION}`)
        : undefined;
    const intl = useIntl();
    const ref = useRef(null);
    const operators = useOperators(props.measure, enableAnomalyDetectionAlert);
    if (!measure) {
        return null;
    }
    return (_jsx(Dropdown, { closeOnParentScroll: closeOnParentScroll, overlayPositionType: overlayPositionType, autofocusOnOpen: true, renderButton: ({ isOpen, toggleDropdown, buttonRef, dropdownId }) => {
            return (_jsx("div", { ref: (item) => {
                    ref.current = item;
                }, children: _jsx(DropdownButton, { id: id, className: cx("gd-alert-comparison-operator-select__button s-alert-operator-select", {
                        "is-active": isOpen,
                    }), value: intl.formatMessage({
                        id: selectedComparisonItem?.title ??
                            selectedRelativeItem?.title ??
                            selectedAiItem?.title,
                    }), iconLeft: selectedComparisonItem?.icon ??
                        selectedRelativeItem?.icon ??
                        selectedAiItem?.icon, onClick: toggleDropdown, buttonRef: buttonRef, dropdownId: dropdownId, isOpen: isOpen, accessibilityConfig: {
                        ariaExpanded: isOpen,
                        popupType: "listbox",
                    } }) }));
        }, renderBody: ({ closeDropdown, ariaAttributes }) => {
            const listboxItems = operators.map((item) => {
                if (item.type === "separator") {
                    return {
                        type: "static",
                        data: { type: "separator" },
                    };
                }
                else if (item.type === "header") {
                    return {
                        type: "static",
                        data: {
                            type: "header",
                            title: item.title,
                            info: item.info,
                        },
                    };
                }
                else {
                    return {
                        type: "interactive",
                        id: item.id.toString(),
                        stringTitle: item.title ? intl.formatMessage({ id: item.title }) : "",
                        data: item,
                    };
                }
            });
            const selectedItemId = (selectedComparisonItem?.id ??
                selectedRelativeItem?.id ??
                selectedAiItem?.id)?.toString();
            return (_jsx(UiListbox, { shouldKeyboardActionStopPropagation: true, shouldKeyboardActionPreventDefault: true, dataTestId: "s-alert-operator-select-list", items: listboxItems, maxWidth: ref.current?.offsetWidth, selectedItemId: selectedItemId, onSelect: (item) => {
                    const operatorItem = item.data;
                    const [first, second] = operatorItem.id.toString().split(".");
                    if (first === AI_OPERATOR && second === AI_OPERATORS.ANOMALY_DETECTION) {
                        onAnomalyDetectionChange(measure);
                        return;
                    }
                    if (first && !second) {
                        onComparisonOperatorChange(measure, first);
                        return;
                    }
                    if (first && second) {
                        onRelativeOperatorChange(measure, second, first);
                    }
                }, onClose: closeDropdown, ariaAttributes: ariaAttributes, InteractiveItemComponent: ({ item, isSelected, onSelect, isFocused }) => {
                    return (_jsx(SingleSelectListItem, { type: item.data.type, icon: item.data.icon ? (_jsx("div", { className: cx("gd-alert-comparison-operator-select__icon", item.data.icon) })) : undefined, title: item.stringTitle, info: item.data.info ? (_jsx(FormattedMessage, { id: item.data.info, values: {
                                spacer: (_jsx("div", { className: "gd-alert-comparison-operator-tooltip-spacer" })),
                            } })) : undefined, isSelected: isSelected, isFocused: isFocused, onClick: onSelect, className: "gd-alert-comparison-operator-select__list-item" }));
                }, StaticItemComponent: ({ item }) => {
                    const headerItem = item.data.type === "header" ? item.data : undefined;
                    return (_jsx(SingleSelectListItem, { type: item.data.type, title: headerItem?.title
                            ? intl.formatMessage({ id: headerItem.title })
                            : undefined, info: headerItem?.info ? (_jsx(FormattedMessage, { id: headerItem.info, values: {
                                spacer: (_jsx("div", { className: "gd-alert-comparison-operator-tooltip-spacer" })),
                            } })) : undefined, className: "gd-alert-comparison-operator-select__list-item" }));
                } }));
        } }));
}
//# sourceMappingURL=AlertComparisonOperatorSelect.js.map