import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2021-2025 GoodData Corporation
import { areObjRefsEqual } from "@gooddata/sdk-model";
import { Dropdown, DropdownList } from "@gooddata/sdk-ui-kit";
import { DisplayFormButton } from "./DisplayFormButton.js";
import { DisplayDropdownItem } from "./DisplayFormItem.js";
const ITEM_HEIGHT = 23;
const DROPDOWN_WIDTH = 225;
const ALIGN_POINTS = [
    {
        align: "bl tl",
        offset: { x: 0, y: 1 },
    },
    {
        align: "tl bl",
        offset: { x: 0, y: -1 },
    },
];
export function DisplayFormDropdown({ displayForms, selectedDisplayForm, onChange, }) {
    const getButtonLabel = () => displayForms.find((displayForm) => {
        return areObjRefsEqual(displayForm.ref, selectedDisplayForm);
    })?.title || "";
    return (_jsx(Dropdown, { alignPoints: ALIGN_POINTS, renderButton: ({ isOpen, toggleDropdown }) => (_jsx(DisplayFormButton, { text: getButtonLabel(), isOpened: isOpen, toggleDropdown: toggleDropdown })), renderBody: ({ closeDropdown }) => (_jsx(DropdownList, { className: "attribute-display-form-dropdown-body s-attribute-display-form-dropdown-body", items: displayForms, itemHeight: ITEM_HEIGHT, width: DROPDOWN_WIDTH, renderItem: ({ item }) => {
                const selected = areObjRefsEqual(item.ref, selectedDisplayForm);
                const onClick = (displayForm) => {
                    closeDropdown();
                    if (!selected) {
                        onChange(displayForm);
                    }
                };
                return (_jsx(DisplayDropdownItem, { displayForm: item, onClick: onClick, selected: selected }, item.id));
            } })) }));
}
//# sourceMappingURL=DisplayFormDropdown.js.map