import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2021-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 { isDataSourceItem, isSelectErrorOption, } from "../types.js";
import { loadUserDataSourceOptionsPromise } from "./backend/loadUserDataSourceOptionsPromise.js";
const SEARCH_INTERVAL = 400;
export function AddDataSourceSelect({ addedDataSources, grantedDataSources, onSelectDataSource, }) {
    const backend = useBackendStrict();
    const intl = useIntl();
    const selectRef = useRef(null);
    useEffect(() => {
        selectRef.current?.focus();
    }, []);
    const onSelect = useCallback((value) => {
        if (!isSelectErrorOption(value)) {
            const dataSource = value.value;
            if (isDataSourceItem(dataSource)) {
                onSelectDataSource(dataSource);
            }
        }
    }, [onSelectDataSource]);
    const noOptionsMessage = useMemo(() => () => intl.formatMessage(messages.searchDataSourceNoMatch), [intl]);
    const loadOptions = useMemo(() => debounce(loadUserDataSourceOptionsPromise(backend, intl), SEARCH_INTERVAL, { leading: true }), [backend, 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 usedDataSources = useMemo(() => (grantedDataSources ? [...addedDataSources, ...grantedDataSources] : []), [addedDataSources, grantedDataSources]);
    const filterOption = (option) => {
        const dataSource = option.value;
        return !usedDataSources.some((usedDataSource) => {
            return usedDataSource.id === dataSource.id;
        });
    };
    return (_jsx("div", { className: "gd-share-dialog-content-select s-user-management-data-source-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.searchDataSourcePlaceholder), onKeyDown: onKeyDownCallback, noOptionsMessage: noOptionsMessage, onChange: onSelect, value: null, filterOption: filterOption }) }));
}
//# sourceMappingURL=AddDataSourceSelect.js.map