import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2019-2026 GoodData Corporation
import { useMemo, useRef, useState } from "react";
import cx from "classnames";
import { FormattedMessage, useIntl } from "react-intl";
import { Button, InvertableSelectSearchBar, Item, ItemsWrapper, Menu, Separator, SubMenu, } from "@gooddata/sdk-ui-kit";
import { IGNORED_CONFIGURATION_MENU_CLICK_CLASS } from "../../../constants/classes.js";
import { DASHBOARD_DIALOG_OVERS_Z_INDEX } from "../../../constants/zIndex.js";
import { getSelectedCatalogAttribute, getSelectedCatalogAttributeValue } from "../utils/getters.js";
export function AlertAttributeSelectOld({ id, selectedAttribute: selectedAttributeProp, getAttributeValues, isResultLoading, selectedValue, onAttributeChange, attributes, catalogAttributes, catalogDateDatasets, showLabel = true, closeOnParentScroll, }) {
    const intl = useIntl();
    const ref = useRef(null);
    const availableAttributes = useMemo(() => {
        return attributes.filter((attr) => attr.type === "attribute");
    }, [attributes]);
    const [searchString, setSearchString] = useState("");
    const [isOpen, setIsOpen] = useState(false);
    const [isOpenAttribute, setIsOpenAttribute] = useState(null);
    const selectedAttribute = useMemo(() => {
        return (selectedAttributeProp &&
            getSelectedCatalogAttribute(catalogAttributes, catalogDateDatasets, selectedAttributeProp));
    }, [selectedAttributeProp, catalogAttributes, catalogDateDatasets]);
    const selectedAttributeValue = useMemo(() => getSelectedCatalogAttributeValue(selectedAttribute, getAttributeValues, selectedValue), [selectedAttribute, getAttributeValues, selectedValue]);
    const opened = Boolean(isOpen && !isResultLoading);
    // if there are no attributes, return null
    if (availableAttributes.length === 0) {
        return null;
    }
    return (_jsxs(_Fragment, { children: [showLabel ? (_jsx("label", { htmlFor: id, className: "gd-edit-alert__measure-label", children: _jsx(FormattedMessage, { id: "insightAlert.config.for" }) })) : null, _jsx("div", { className: "gd-alert-attribute-select", children: _jsx(Menu, { closeOnScroll: closeOnParentScroll, toggler: _jsx("div", { ref: (item) => {
                            ref.current = item;
                        }, children: _jsx(Button, { id: id, className: cx("gd-alert-attribute-select__button s-alert-attribute-select", {
                                "is-active": opened,
                            }), size: "small", disabled: isResultLoading, variant: "secondary", iconLeft: "gd-icon-attribute", iconRight: `gd-icon-navigate${opened ? "up" : "down"}`, onClick: () => {
                                if (isResultLoading) {
                                    return;
                                }
                                setIsOpen(!isOpen);
                                setIsOpenAttribute(null);
                            }, children: selectedAttribute ? (_jsxs("span", { children: [selectedAttribute?.title, _jsxs("span", { children: ["\u00A0", "/", "\u00A0"] }), selectedAttributeValue
                                        ? (selectedAttributeValue.title ?? selectedAttributeValue.name) ||
                                            `(${intl.formatMessage({ id: "empty_value" })})`
                                        : intl.formatMessage({
                                            id: "insightAlert.config.selectAttribute",
                                        })] })) : (_jsx(_Fragment, { children: intl.formatMessage({ id: "insightAlert.config.selectAttribute" }) })) }) }), togglerWrapperClassName: "gd-alert-attribute-select__button_wrapper", opened: opened, onOpenedChange: ({ opened }) => {
                        setIsOpen(opened);
                    }, openAction: "click", children: _jsx(ItemsWrapper, { style: {
                            width: ref.current?.offsetWidth ?? 0,
                            zIndex: DASHBOARD_DIALOG_OVERS_Z_INDEX,
                        }, className: IGNORED_CONFIGURATION_MENU_CLICK_CLASS, children: _jsxs("div", { className: "gd-alert-attribute-select__submenu s-alert-attribute-menu-content", children: [
                                _jsx(Item, { className: "gd-alert-attribute-select__menu-item_wrapper", checked: !selectedAttribute, onClick: (e) => {
                                        onAttributeChange(undefined, undefined);
                                        setIsOpen(false);
                                        setIsOpenAttribute(null);
                                        e.preventDefault();
                                        e.stopPropagation();
                                    }, children: _jsx("div", { className: "gd-alert-attribute-select__menu-item s-menu-alert-attribute-item-value", children: intl.formatMessage({ id: "insightAlert.config.selectAttribute" }) }) }), _jsx(Separator, {}), availableAttributes.map((attribute, i) => {
                                    const item = getSelectedCatalogAttribute(catalogAttributes, catalogDateDatasets, attribute);
                                    if (!item) {
                                        return null;
                                    }
                                    const isSelected = selectedAttribute?.id === item.id;
                                    const values = getAttributeValues(item);
                                    return (_jsx(SubMenu, { toggler: _jsx(Item, { checked: isSelected, subMenu: true, className: "gd-alert-attribute-select__menu-item_wrapper", children: _jsx("div", { className: "gd-alert-attribute-select__menu-item s-menu-alert-attribute-item", children: item.title ||
                                                    `(${intl.formatMessage({ id: "empty_value" })})` }) }), openAction: "click", opened: isOpenAttribute === attribute.attribute.attribute.localIdentifier, onOpenedChange: ({ opened }) => {
                                            setIsOpenAttribute(opened ? attribute.attribute.attribute.localIdentifier : null);
                                            setSearchString("");
                                        }, children: _jsx(ItemsWrapper, { style: {
                                                zIndex: DASHBOARD_DIALOG_OVERS_Z_INDEX + 1,
                                            }, className: IGNORED_CONFIGURATION_MENU_CLICK_CLASS, children: _jsxs("div", { className: cx("gd-alert-attribute-select__submenu-content", "s-alert-attribute-submenu-content"), children: [values.length > 5 && (_jsx("div", { children: _jsx(InvertableSelectSearchBar, { onSearch: setSearchString, searchString: searchString, searchPlaceholder: intl.formatMessage({
                                                                id: "attributesDropdown.placeholder",
                                                            }), className: "gd-alert-attribute-select__menu-item_search" }) })), _jsx(Item, { className: "gd-alert-attribute-select__menu-item_wrapper", checked: Boolean(isSelected && !selectedAttributeValue), onClick: (e) => {
                                                            onAttributeChange(attribute, undefined);
                                                            setIsOpen(false);
                                                            setIsOpenAttribute(null);
                                                            e.preventDefault();
                                                            e.stopPropagation();
                                                        }, children: _jsxs("div", { className: "gd-alert-attribute-select__menu-item s-menu-alert-attribute-item-value", children: [intl.formatMessage({
                                                                    id: "insightAlert.config.selectAttribute",
                                                                }), " ", "(", values.length, ")"] }) }), _jsx(Separator, {}), _jsx("div", { className: "gd-alert-attribute-select__menu-item__values", children: values
                                                            .filter((item) => {
                                                            if (searchString) {
                                                                return item.title
                                                                    .toLowerCase()
                                                                    .includes(searchString.toLowerCase());
                                                            }
                                                            return true;
                                                        })
                                                            .map((value, j) => (_jsx(Item, { checked: Boolean(isSelected &&
                                                                value.value ===
                                                                    selectedAttributeValue?.value), className: "gd-alert-attribute-select__menu-item_wrapper", onClick: (e) => {
                                                                onAttributeChange(attribute, value);
                                                                setIsOpen(false);
                                                                setIsOpenAttribute(null);
                                                                e.preventDefault();
                                                                e.stopPropagation();
                                                            }, children: _jsx("div", { className: "gd-alert-attribute-select__menu-item s-menu-alert-attribute-item-value", children: (value.title ?? value.name) ||
                                                                    `(${intl.formatMessage({
                                                                        id: "empty_value",
                                                                    })})` }) }, j))) })
                                                ] }) }) }, i));
                                })] }) }) }) })
        ] }));
}
//# sourceMappingURL=AlertAttributeSelectOld.js.map