import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2025 GoodData Corporation
import { useRef, useState } from "react";
import { defineMessages, useIntl } from "react-intl";
import { Overlay, UiButton, alignConfigToAlignPoint } from "@gooddata/sdk-ui-kit";
import { NotificationFiltersDetailDialog } from "./NotificationFiltersDetailDialog.js";
const ALIGN_POINTS = [
    alignConfigToAlignPoint({
        triggerAlignPoint: "bottom-right",
        overlayAlignPoint: "top-right",
        offset: { x: 2, y: 3 },
    }),
];
const messages = defineMessages({
    buttonLabel: {
        id: "notifications.filters.buttonLabel",
    },
});
/**
 * @internal
 */
export function NotificationFiltersDetail({ filters }) {
    const [isFiltersDialogOpen, setIsFiltersDialogOpen] = useState(false);
    const intl = useIntl();
    const ref = useRef(null);
    const closeFiltersDialog = () => setIsFiltersDialogOpen(false);
    const toggleFiltersDialog = () => setIsFiltersDialogOpen((x) => !x);
    return (_jsxs(_Fragment, { children: [filters.length ? (_jsx(UiButton, { ref: ref, onClick: (e) => {
                    e.stopPropagation();
                    toggleFiltersDialog();
                }, onKeyDown: (e) => {
                    e.stopPropagation();
                }, variant: "tertiary", size: "small", label: intl.formatMessage(messages.buttonLabel, { count: filters.length }) })) : null, isFiltersDialogOpen ? (_jsx(Overlay, { isModal: false, alignTo: ref.current, alignPoints: ALIGN_POINTS, closeOnEscape: true, closeOnOutsideClick: true, closeOnParentScroll: true, closeOnMouseDrag: false, onClose: closeFiltersDialog, children: _jsx(NotificationFiltersDetailDialog, { filters: filters, onClose: closeFiltersDialog }) })) : null] }));
}
//# sourceMappingURL=NotificationFiltersDetail.js.map