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";
import { messages } from "../messages.js";
const options = [
    {
        title: messages.alertGranularityHour.id,
        id: "HOUR",
    },
    {
        title: messages.alertGranularityDay.id,
        id: "DAY",
    },
    {
        title: messages.alertGranularityWeek.id,
        id: "WEEK",
    },
    {
        title: messages.alertGranularityMonth.id,
        id: "MONTH",
    },
    {
        title: messages.alertGranularityQuarter.id,
        id: "QUARTER",
    },
    {
        title: messages.alertGranularityYear.id,
        id: "YEAR",
    },
];
export function AlertGranularitySelect({ id, allowHourlyRecurrence, selectedGranularity = "WEEK", onGranularityChange, overlayPositionType, closeOnParentScroll, }) {
    const usableOptions = options.filter((o) => {
        if (!allowHourlyRecurrence) {
            return o.id !== "HOUR";
        }
        return true;
    });
    const selectedOption = usableOptions.find((o) => o.id === selectedGranularity);
    const intl = useIntl();
    return (_jsx("div", { className: "gd-alert-granularity-select", children: _jsx(Dropdown, { closeOnParentScroll: closeOnParentScroll, overlayPositionType: overlayPositionType, autofocusOnOpen: true, renderButton: ({ isOpen, toggleDropdown, buttonRef, dropdownId }) => {
                return (_jsx(DropdownButton, { id: id, value: selectedOption ? intl.formatMessage({ id: selectedOption.title }) : "", onClick: toggleDropdown, className: cx("gd-edit-alert-granularity-select__button s-alert-granularity-select"), buttonRef: buttonRef, dropdownId: dropdownId, isOpen: isOpen, accessibilityConfig: {
                        ariaExpanded: isOpen,
                        popupType: "listbox",
                    } }));
            }, renderBody: ({ closeDropdown, ariaAttributes }) => {
                const listboxItems = usableOptions.map((option) => ({
                    type: "interactive",
                    id: option.id,
                    stringTitle: intl.formatMessage({ id: option.title }),
                    data: option,
                }));
                return (_jsx(UiListbox, { shouldKeyboardActionStopPropagation: true, shouldKeyboardActionPreventDefault: true, dataTestId: "s-alert-granularity-select-list", items: listboxItems, selectedItemId: selectedGranularity, onSelect: (item) => {
                        if (selectedGranularity !== item.id) {
                            onGranularityChange(item.id);
                        }
                    }, onClose: closeDropdown, ariaAttributes: ariaAttributes, InteractiveItemComponent: ({ item, isSelected, onSelect, isFocused }) => {
                        return (_jsx(SingleSelectListItem, { title: item.stringTitle, isSelected: isSelected, isFocused: isFocused, onClick: onSelect, className: "gd-alert-granularity-select__list-item" }));
                    } }));
            } }) }));
}
