import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2026 GoodData Corporation
import { useId, useMemo, useRef } from "react";
import { useIntl } from "react-intl";
import { olpPermissionMessages } from "../../locales.js";
import { bem } from "../@utils/bem.js";
import { UiIcon } from "../UiIcon/UiIcon.js";
import { UiIconButton } from "../UiIconButton/UiIconButton.js";
import { UiLabelsChecklist } from "../UiLabelsChecklist/UiLabelsChecklist.js";
import { UiMenu } from "../UiMenu/UiMenu.js";
import { UiPopover } from "../UiPopover/UiPopover.js";
const { b } = bem("gd-ui-kit-more-options-menu");
// Defined at module scope, and reading data through a ref, so its identity never
// changes across renders — UiMenu remounts the drill-in on a new component type,
// which would drop the checklist's staged edits.
function LabelsChecklistContent({ onBack, onClose, dataRef }) {
    const data = dataRef.current;
    return (_jsx(UiLabelsChecklist, { items: data.labels, defaultSelectedIds: data.selectedLabelIds, onApply: (ids) => data.onLabelsChange?.(ids), onBack: onBack, onClose: onClose, dataTestId: data.dataTestId }));
}
/**
 * Per-grantee "⋯" menu: "Manage labels access" (drills into {@link UiLabelsChecklist}),
 * "Transfer ownership" and "Remove access". Each row shows only when its data/handler
 * is given. Remove access appears here for read-only permission rows whose level control
 * has no dropdown to host it.
 *
 * @internal
 */
export function UiMoreOptionsMenu({ labels, selectedLabelIds, onLabelsChange, onTransferOwnership, onRemoveAccess, isDisabled, dataTestId, }) {
    const intl = useIntl();
    const menuId = useId();
    const hasLabels = (labels?.length ?? 0) > 0;
    // Feed the live inputs to the stable content component through a ref so the
    // component itself never has to change (see LabelsChecklistContent).
    const dataRef = useRef({
        labels: labels ?? [],
        selectedLabelIds: selectedLabelIds ?? [],
        onLabelsChange,
        dataTestId,
    });
    dataRef.current = {
        labels: labels ?? [],
        selectedLabelIds: selectedLabelIds ?? [],
        onLabelsChange,
        dataTestId,
    };
    const labelsContentRef = useRef(undefined);
    if (!labelsContentRef.current) {
        labelsContentRef.current = (props) => _jsx(LabelsChecklistContent, { ...props, dataRef: dataRef });
    }
    const items = useMemo(() => {
        const result = [];
        if (hasLabels) {
            result.push({
                type: "content",
                id: "labels",
                stringTitle: intl.formatMessage(olpPermissionMessages.labels),
                showComponentOnly: true,
                // UiMenu adds the trailing drill-in chevron itself; we only set the leading icon.
                iconLeft: _jsx(UiIcon, { type: "ldmLabel", size: 16, color: "complementary-7" }),
                data: undefined,
                Component: labelsContentRef.current,
            });
        }
        if (onTransferOwnership) {
            result.push({
                type: "interactive",
                id: "transfer",
                stringTitle: intl.formatMessage(olpPermissionMessages.transferOwnership),
                iconLeft: _jsx(UiIcon, { type: "sync", size: 16, color: "complementary-7" }),
                data: undefined,
            });
        }
        if (onRemoveAccess) {
            result.push({
                type: "interactive",
                id: "remove",
                stringTitle: intl.formatMessage(olpPermissionMessages.removeAccess),
                iconLeft: _jsx(UiIcon, { type: "trash", size: 16, color: "complementary-7" }),
                data: undefined,
            });
        }
        return result;
    }, [hasLabels, onTransferOwnership, onRemoveAccess, intl]);
    return (_jsx(UiPopover, { anchor: _jsx(UiIconButton, { icon: "ellipsis", variant: "tertiary", size: "large", iconColor: "complementary-6", isDisabled: isDisabled, accessibilityConfig: {
                ariaLabel: intl.formatMessage(olpPermissionMessages.moreOptionsAriaLabel),
            } }), anchorAccessibilityConfig: { ariaHaspopup: "menu" }, width: 200, content: ({ onClose }) => (_jsx("div", { className: b(), "data-testid": dataTestId, children: _jsx(UiMenu, { items: items, size: "small", onSelect: (item) => {
                    if (item.id === "transfer") {
                        onTransferOwnership?.();
                    }
                    else if (item.id === "remove") {
                        onRemoveAccess?.();
                    }
                }, onClose: onClose, ariaAttributes: {
                    id: menuId,
                    "aria-label": intl.formatMessage(olpPermissionMessages.moreOptionsMenuLabel),
                } }) })) }));
}
