import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2026 GoodData Corporation
import { useCallback, useMemo } from "react";
import { useIntl } from "react-intl";
import { olpAddGranteeDialogMessages, olpPermissionMessages, uiGranteeAsyncPickerMessages, } from "../../locales.js";
import { bem } from "../@utils/bem.js";
import { UiAutocomplete } from "../UiAutocomplete/UiAutocomplete.js";
import { UiButton } from "../UiButton/UiButton.js";
import { UiGranteeRow } from "../UiGranteeRow/UiGranteeRow.js";
import { UiPermissionMenu } from "../UiPermissionMenu/UiPermissionMenu.js";
const { b, e } = bem("gd-ui-kit-grantee-async-picker");
/**
 * Sectioned async grantee picker — specialization of `UiAutocomplete` for the
 * share/access-control domain. Renders a search input with a dropdown split
 * into `Groups` and `Users` sections, and a list of picked grantees below
 * (each as a `UiGranteeRow` with a `UiPermissionMenu` trigger). The
 * permission menu carries the Remove action; consumers wire it via `onRemove`.
 *
 * @internal
 */
export function UiGranteeAsyncPicker({ loadOptions, selectedGrantees = [], onSelect, onPermissionChange, onRemove, dataTestId, }) {
    const intl = useIntl();
    const groupsLabel = intl.formatMessage(uiGranteeAsyncPickerMessages.sectionGroups);
    const usersLabel = intl.formatMessage(uiGranteeAsyncPickerMessages.sectionUsers);
    const canViewLabel = intl.formatMessage(olpPermissionMessages.canView);
    const canShareLabel = intl.formatMessage(olpPermissionMessages.canViewAndShare);
    const selectedIds = useMemo(() => selectedGrantees.map((g) => g.id), [selectedGrantees]);
    const adaptedLoadOptions = useCallback(async (search) => {
        const { groups, users } = await loadOptions(search);
        const sections = [];
        if (groups.length > 0) {
            sections.push({
                id: "groups",
                label: groupsLabel,
                options: groups.map((g) => ({ id: g.id, label: g.name, grantee: g })),
            });
        }
        if (users.length > 0) {
            sections.push({
                id: "users",
                label: usersLabel,
                options: users.map((u) => ({
                    id: u.id,
                    label: u.name,
                    secondaryText: u.email,
                    grantee: u,
                })),
            });
        }
        // The grantee picker doesn't paginate at the kit level — backend
        // pagination, if any, is hidden inside the consumer's loader.
        return { sections };
    }, [loadOptions, groupsLabel, usersLabel]);
    const handleSelect = useCallback((option) => {
        onSelect(option.grantee);
    }, [onSelect]);
    const autocompleteMessages = useMemo(() => ({
        searchPlaceholder: intl.formatMessage(olpAddGranteeDialogMessages.searchPlaceholder),
        stateError: intl.formatMessage(uiGranteeAsyncPickerMessages.stateError),
        stateNoMatch: intl.formatMessage(uiGranteeAsyncPickerMessages.stateNoMatch),
    }), [intl]);
    const fieldLabel = intl.formatMessage(olpAddGranteeDialogMessages.userOrGroup);
    return (_jsxs("div", { className: b(), "data-testid": dataTestId, children: [
            _jsxs("div", { className: e("field"), children: [
                    _jsx("div", { className: e("field-label"), children: fieldLabel }), _jsx(UiAutocomplete, { loadOptions: adaptedLoadOptions, selectedIds: selectedIds, onSelect: handleSelect, messages: autocompleteMessages, accessibilityConfig: {
                            ariaLabel: fieldLabel,
                        } })
                ] }), selectedGrantees.length === 0 ? (_jsx("div", { className: e("empty-state"), children: intl.formatMessage(olpAddGranteeDialogMessages.emptyState) })) : null, selectedGrantees.length > 0 ? (_jsx("ul", { className: e("picked-list"), children: selectedGrantees.map((g) => {
                    const triggerLabel = g.permissionLevel === "SHARE" ? canShareLabel : canViewLabel;
                    return (_jsx("li", { className: e("picked-item"), children: _jsx(UiGranteeRow, { kind: g.kind, name: g.name, email: g.email, controls: _jsx(UiPermissionMenu, { selectedLevel: g.permissionLevel, onPermissionChange: (next) => onPermissionChange?.(g, next), onRemoveAccess: onRemove ? () => onRemove(g) : undefined, anchor: _jsx(UiButton, { label: triggerLabel, variant: "dropdownInline", size: "small", iconAfter: "navigateDown" }) }) }) }, g.id));
                }) })) : null] }));
}
