import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useMemo } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { Dropdown, DropdownButton, Hyperlink, SingleSelectListItem, UiListbox, } from "@gooddata/sdk-ui-kit";
import { DEFAULT_DROPDOWN_ALIGN_POINTS } from "../../constants.js";
const DROPDOWN_WIDTH = 199;
export function DestinationSelect({ notificationChannels, selectedItemId, onChange, closeOnParentScroll, overlayPositionType, }) {
    const intl = useIntl();
    const items = useMemo(() => {
        return (notificationChannels?.map((wh) => ({
            id: wh.id,
            title: wh?.title ?? wh.id,
        })) ?? []);
    }, [notificationChannels]);
    const selectedItem = useMemo(() => {
        return items.find((item) => item.id === selectedItemId);
    }, [items, selectedItemId]);
    const accessibilityValue = "schedule.destination";
    return (_jsxs("div", { className: "gd-input-component gd-destination-field s-gd-notifications-channels-dialog-destination", children: [
            _jsx("label", { htmlFor: accessibilityValue, className: "gd-label", children: _jsx(FormattedMessage, { id: "dialogs.schedule.email.destination" }) }), items.length === 0 ? (_jsxs("div", { className: "gd-notifications-channels-dialog-destination-empty", children: [
                    _jsxs("span", { children: [
                            _jsx("span", { className: "gd-icon-warning" }), _jsx(FormattedMessage, { id: "dialogs.schedule.email.destination.missing" })
                        ] }), _jsx(Hyperlink, { text: intl.formatMessage({ id: "dialogs.schedule.email.destination.help" }), href: "/settings" })
                ] })) : (_jsx(Dropdown, { overlayPositionType: overlayPositionType, closeOnParentScroll: closeOnParentScroll, alignPoints: DEFAULT_DROPDOWN_ALIGN_POINTS, className: "gd-notifications-channels-dialog-destination s-gd-notifications-channels-dialog-destination", autofocusOnOpen: true, renderButton: ({ toggleDropdown, dropdownId, isOpen, buttonRef }) => (_jsx(DropdownButton, { id: accessibilityValue, value: selectedItem?.title, onClick: toggleDropdown, className: "gd-notifications-channels-dialog-destination-button", buttonRef: buttonRef, dropdownId: dropdownId, isOpen: isOpen, accessibilityConfig: {
                        popupType: "listbox",
                    } })), renderBody: ({ closeDropdown, ariaAttributes }) => {
                    const listboxItems = items.map((item) => ({
                        type: "interactive",
                        id: item.id,
                        stringTitle: item.title,
                        data: item,
                    }));
                    const handleKeyDown = (e) => {
                        if (e.key !== "Tab") {
                            return;
                        }
                        closeDropdown();
                    };
                    return (_jsx(UiListbox, { shouldKeyboardActionStopPropagation: true, shouldKeyboardActionPreventDefault: true, dataTestId: "s-gd-notifications-channels-dialog-destination-list", items: listboxItems, maxWidth: DROPDOWN_WIDTH, selectedItemId: selectedItemId, onSelect: (item) => {
                            onChange(item.id);
                        }, onUnhandledKeyDown: handleKeyDown, onClose: closeDropdown, ariaAttributes: ariaAttributes, InteractiveItemComponent: ({ item, isSelected, onSelect, isFocused }) => {
                            return (_jsx(SingleSelectListItem, { title: item.stringTitle, isSelected: isSelected, isFocused: isFocused, onClick: onSelect, className: "gd-notifications-channels-dialog-destination-list-item" }));
                        } }));
                } }))] }));
}
//# sourceMappingURL=DestinationSelect.js.map