import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2022-2025 GoodData Corporation
import { forwardRef, useCallback, useMemo } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { withBubble } from "../../../../Bubble/withBubble.js";
import { granularPermissionMessageLabels } from "../../../../locales.js";
const GranularPermissionSelectItem = forwardRef(({ permission, grantee, selectedPermission, toggleDropdown, handleSetSelectedPermission, onChange }, ref) => {
    const intl = useIntl();
    const handleOnChange = useCallback((permission) => {
        toggleDropdown();
        if (permission.id !== selectedPermission) {
            handleSetSelectedPermission(permission.id);
            onChange({ ...grantee, permissions: [permission.id] });
        }
    }, [grantee, toggleDropdown, handleSetSelectedPermission, onChange, selectedPermission]);
    const isSelected = useMemo(() => permission.id === selectedPermission, [permission, selectedPermission]);
    return (_jsx("div", { id: permission.id, ref: ref, onClick: () => {
            if (permission.enabled) {
                handleOnChange(permission);
            }
        }, tabIndex: permission.enabled ? 0 : -1, role: "option", "aria-selected": isSelected, "aria-disabled": !permission.enabled, className: cx("gd-list-item", "gd-menu-item", "gd-granular-permission-select-item", "s-granular-permission-item", {
            "is-disabled": !permission.enabled,
            "is-selected": isSelected,
        }), children: _jsx("div", { children: intl.formatMessage(granularPermissionMessageLabels[permission.id]) }) }));
});
GranularPermissionSelectItem.displayName = "GranularPermissionSelectItem";
export const GranularPermissionSelectItemWithBubble = withBubble(GranularPermissionSelectItem);
