import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { invariant } from "ts-invariant";
import { areObjRefsEqual } from "@gooddata/sdk-model";
import { Dropdown, DropdownButton, DropdownList } from "@gooddata/sdk-ui-kit";
import { ConnectingAttributeItem } from "./ConnectingAttributeItem.js";
const DROPDOWN_BODY_WIDTH = 205;
const ALIGN_POINTS = [
    {
        align: "br tr",
    },
    {
        align: "tr br",
    },
];
export function ConnectingAttributeDropdown({ itemLocalId, selectedConnectingAttributeRef, connectingAttributes, onSelect, }) {
    const selectedConnectingAttribute = connectingAttributes.find((attr) => areObjRefsEqual(attr.ref, selectedConnectingAttributeRef));
    invariant(selectedConnectingAttribute, "Cannot find connecting attribute in the catalog attribute items.");
    return (_jsx(Dropdown, { className: "connecting-attributes-dropdown s-connecting-attributes-dropdown", closeOnParentScroll: true, closeOnMouseDrag: true, closeOnOutsideClick: true, alignPoints: ALIGN_POINTS, renderButton: ({ isOpen, toggleDropdown }) => (_jsx(DropdownButton, { value: selectedConnectingAttribute.title, iconLeft: "gd-icon-attribute", title: selectedConnectingAttribute.title, isOpen: isOpen, onClick: toggleDropdown })), renderBody: ({ closeDropdown }) => (_jsx(DropdownList, { className: "connecting-attributes-dropdown-body s-connecting-attributes-dropdown-body", width: DROPDOWN_BODY_WIDTH, items: connectingAttributes, renderItem: ({ item }) => {
                const selected = areObjRefsEqual(item.ref, selectedConnectingAttributeRef);
                const onClick = () => {
                    closeDropdown();
                    if (!selected) {
                        onSelect(itemLocalId, item.ref);
                    }
                };
                return (_jsx(ConnectingAttributeItem, { title: item.title, icon: "gd-icon-attribute", selected: selected, onClick: onClick }));
            } })) }));
}
//# sourceMappingURL=ConnectingAttributeDropdown.js.map