import { jsx as _jsx } from "react/jsx-runtime";
import cx from "classnames";
import { useIntl } from "react-intl";
import { Dropdown, DropdownButton, SingleSelectListItem, UiListbox, } from "@gooddata/sdk-ui-kit";
export function AlertDestinationSelect({ id, selectedDestination, onDestinationChange, destinations, overlayPositionType, closeOnParentScroll, }) {
    const intl = useIntl();
    const selectedOption = destinations.find((o) => o.id === selectedDestination);
    const accessibilityAriaLabel = intl.formatMessage({ id: "alert.accessibility.destination.label" });
    return (_jsx(Dropdown, { closeOnParentScroll: closeOnParentScroll, overlayPositionType: overlayPositionType, autofocusOnOpen: true, renderButton: ({ isOpen, toggleDropdown, buttonRef, dropdownId }) => {
            return (_jsx(DropdownButton, { id: id, value: selectedOption?.title ?? " - ", onClick: toggleDropdown, className: cx("gd-alert-destination-select__button s-alert-destination-select", "button-dropdown", "dropdown-button", {
                    "gd-alert-destination-select__button--open": isOpen,
                    "is-active": isOpen,
                }), buttonRef: buttonRef, accessibilityConfig: {
                    ariaLabel: accessibilityAriaLabel,
                    ariaExpanded: isOpen,
                    popupType: "listbox",
                }, dropdownId: dropdownId, isOpen: isOpen }));
        }, renderBody: ({ closeDropdown, ariaAttributes }) => {
            const listboxItems = destinations.map((destination) => ({
                type: "interactive",
                id: destination.id,
                stringTitle: destination.title ?? "",
                data: destination,
            }));
            return (_jsx(UiListbox, { shouldKeyboardActionStopPropagation: true, shouldKeyboardActionPreventDefault: true, dataTestId: "s-alert-destination-select-list", items: listboxItems, selectedItemId: selectedDestination, shouldCloseOnSelect: true, onSelect: (item) => {
                    if (item.id !== selectedDestination) {
                        onDestinationChange(item.id);
                    }
                }, onClose: closeDropdown, ariaAttributes: ariaAttributes, InteractiveItemComponent: ({ item, isSelected, onSelect, isFocused }) => {
                    return (_jsx(SingleSelectListItem, { title: item.data.title, isSelected: isSelected, isFocused: isFocused, onClick: onSelect, className: "gd-alert-destination-select__list-item" }));
                } }));
        } }));
}
