import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2023-2025 GoodData Corporation
import { useCallback, useEffect, useMemo, useRef } from "react";
import debounce from "debounce-promise";
import { useIntl } from "react-intl";
import AsyncSelect from "react-select/async";
import { useBackendStrict } from "@gooddata/sdk-ui";
import { EmptyRenderer, GroupHeadingRenderer, InputRendered, LoadingMessageRenderer, MenuListRendered, NoOptionsMessageRenderer, OptionRenderer, } from "./AsyncSelectComponents.js";
import { messages } from "../locales.js";
import { useOrganizationId } from "../OrganizationIdContext.js";
import { isGrantedUserGroup, isSelectErrorOption, } from "../types.js";
import { loadUserGroupOptionsPromise } from "./backend/loadUserGroupOptionsPromise.js";
const SEARCH_INTERVAL = 400;
export function AddUserGroupSelect({ addedUserGroups, grantedUserGroups, onSelect, }) {
    const intl = useIntl();
    const selectRef = useRef(null);
    const backend = useBackendStrict();
    const organizationId = useOrganizationId();
    useEffect(() => {
        selectRef.current?.focus();
    }, []);
    const onChange = useCallback((value) => {
        if (!isSelectErrorOption(value)) {
            const userGroup = value.value;
            if (isGrantedUserGroup(userGroup)) {
                onSelect(userGroup);
            }
        }
    }, [onSelect]);
    const noOptionsMessage = useMemo(() => () => intl.formatMessage(messages.searchUserGroupNoMatch), [intl]);
    const loadOptions = useMemo(() => debounce(loadUserGroupOptionsPromise(backend, organizationId, intl), SEARCH_INTERVAL, {
        leading: true,
    }), [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 usedUserGroups = useMemo(() => (grantedUserGroups ? [...addedUserGroups, ...grantedUserGroups] : []), [addedUserGroups, grantedUserGroups]);
    const filterOption = (option) => {
        const userGroup = option.value;
        return !usedUserGroups.some((usedGroup) => {
            return usedGroup.id === userGroup.id;
        });
    };
    return (_jsx("div", { className: "gd-share-dialog-content-select s-user-management-user-group-select", children: _jsx(AsyncSelect, { ref: selectRef, defaultMenuIsOpen: true, classNamePrefix: "gd-share-dialog", components: {
                DropdownIndicator: EmptyRenderer,
                IndicatorSeparator: EmptyRenderer,
                Input: InputRendered,
                Option: OptionRenderer,
                GroupHeading: GroupHeadingRenderer,
                LoadingMessage: LoadingMessageRenderer,
                LoadingIndicator: EmptyRenderer,
                MenuList: MenuListRendered,
                NoOptionsMessage: NoOptionsMessageRenderer,
            }, loadOptions: loadOptions, defaultOptions: true, placeholder: intl.formatMessage(messages.searchUserGroupPlaceholder), onKeyDown: onKeyDownCallback, noOptionsMessage: noOptionsMessage, onChange: onChange, value: null, filterOption: filterOption }) }));
}
//# sourceMappingURL=AddUserGroupSelect.js.map