import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2023-2025 GoodData Corporation
import { useCallback, useMemo } from "react";
import { useIntl } from "react-intl";
import { AsyncPaginate } from "react-select-async-paginate";
import { useBackendStrict } from "@gooddata/sdk-ui";
import { EmptyRenderer, GroupHeadingRenderer, InputRendered, LoadingMessageRenderer, MenuListRenderer, NoOptionsMessageRenderer, OptionRenderer, } from "./AsyncSelectComponents.js";
import { messages } from "../locales.js";
import { useOrganizationId } from "../OrganizationIdContext.js";
import { isSelectErrorOption, isUserItem, } from "../types.js";
import { loadUsersOptionsPromise } from "./backend/loadUsersOptionsPromise.js";
const SEARCH_INTERVAL = 400;
export function AddUserSelect({ addedUsers, grantedUsers, onSelect }) {
    const intl = useIntl();
    const backend = useBackendStrict();
    const organizationId = useOrganizationId();
    const onChange = useCallback((value) => {
        if (!isSelectErrorOption(value)) {
            const user = value.value;
            if (isUserItem(user)) {
                onSelect(user);
            }
        }
    }, [onSelect]);
    const noOptionsMessage = useMemo(() => () => intl.formatMessage(messages.searchUserNoMatch), [intl]);
    const loadOptions = useMemo(() => {
        return loadUsersOptionsPromise(backend, organizationId, intl);
    }, [backend, organizationId, intl]);
    const onKeyDownCallback = useCallback((e) => {
        const target = e.target;
        // react-select has default behavior on space and tab key  - open menu / select first option etc.
        // We need disable this behavior for space key by set e.preventDefault when input is empty and for tab key completely
        //space
        if (e.keyCode === 32 && !target.value) {
            e.preventDefault();
        }
        // tab
        if (e.keyCode === 9) {
            e.preventDefault();
        }
    }, []);
    const usedUsers = useMemo(() => (grantedUsers ? [...addedUsers, ...grantedUsers] : []), [addedUsers, grantedUsers]);
    const filterOption = (option) => {
        const user = option.value;
        return !usedUsers.some((usedUser) => {
            return usedUser.id === user.id;
        });
    };
    return (_jsx("div", { className: "gd-share-dialog-content-select s-user-management-user-select", children: _jsx(AsyncPaginate, { autoFocus: true, defaultMenuIsOpen: true, classNamePrefix: "gd-share-dialog", components: {
                DropdownIndicator: EmptyRenderer,
                IndicatorSeparator: EmptyRenderer,
                Input: InputRendered,
                Option: OptionRenderer,
                GroupHeading: GroupHeadingRenderer,
                LoadingMessage: LoadingMessageRenderer,
                LoadingIndicator: EmptyRenderer,
                MenuList: MenuListRenderer,
                NoOptionsMessage: NoOptionsMessageRenderer,
            }, loadOptions: loadOptions, defaultOptions: true, placeholder: intl.formatMessage(messages.searchUserPlaceholder), onKeyDown: onKeyDownCallback, noOptionsMessage: noOptionsMessage, onChange: onChange, value: null, filterOption: filterOption, additional: {
                page: 0,
            }, debounceTimeout: SEARCH_INTERVAL }) }));
}
//# sourceMappingURL=AddUserSelect.js.map