import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback, useMemo } from "react";
import cx from "classnames";
import { defineMessages, useIntl } from "react-intl";
import { isInsightWidget } from "@gooddata/sdk-model";
import { Button, Dropdown, IconAlert, IconAlertPaused, IconEllipsis, IconWarning, SELECT_ITEM_ACTION, ShortenedText, UiListbox, bemFactory, separatorStaticItem, } from "@gooddata/sdk-ui-kit";
import { useTheme } from "@gooddata/sdk-ui-theme-provider";
import { useDashboardSelector } from "../../../../model/react/DashboardStoreProvider.js";
import { selectSeparators } from "../../../../model/store/config/configSelectors.js";
import { selectCanManageWorkspace } from "../../../../model/store/permissions/permissionsSelectors.js";
import { selectWidgetByRef } from "../../../../model/store/tabs/layout/layoutSelectors.js";
import { selectCurrentUser } from "../../../../model/store/user/userSelectors.js";
import { gdColorNegative, gdColorStateBlank } from "../../../constants/colors.js";
import { useAlertValidation } from "../../DefaultAlertingDialog/hooks/useAlertValidation.js";
import { getSubtitle } from "../../DefaultAlertingDialog/utils/getters.js";
const TEXT_TOOLTIP_ALIGN_POINTS = [
    { align: "tc bc", offset: { x: 0, y: 0 } },
    { align: "bc tc", offset: { x: 0, y: 0 } },
];
const labelMessages = defineMessages({
    delete: { id: "alerting.alert.menu.delete" },
    pause: { id: "alerting.alert.menu.pause" },
    resume: { id: "alerting.alert.menu.resume" },
    edit: { id: "alerting.alert.menu.edit" },
});
const { b, e } = bemFactory("gd-alerts-list-item");
export function Alert({ alert, onDelete, onEdit, onTogglePause, focusedAction, isDropdownOpen, onToggleDropdown, listId, isSubtitleVisible, }) {
    const theme = useTheme();
    const intl = useIntl();
    const { formatMessage } = intl;
    const { isValid } = useAlertValidation(alert);
    const iconColor = theme?.palette?.complementary?.c6 ?? gdColorStateBlank;
    const iconColorError = theme?.palette?.error?.base ?? gdColorNegative;
    const iconActive = _jsx(IconAlert, { color: iconColor });
    const iconPaused = _jsx(IconAlertPaused, { color: iconColor });
    const iconError = _jsx(IconWarning, { color: iconColorError });
    const isPaused = alert.alert?.trigger.state === "PAUSED";
    const editWidgetId = alert.metadata?.widget;
    const editWidgetRef = editWidgetId ? { identifier: editWidgetId } : undefined;
    const widget = useDashboardSelector(selectWidgetByRef(editWidgetRef));
    const insightWidget = isInsightWidget(widget) ? widget : undefined;
    const widgetName = insightWidget?.title ?? "";
    const separators = useDashboardSelector(selectSeparators);
    const subtitle = getSubtitle(intl, widgetName, alert, separators);
    const currentUser = useDashboardSelector(selectCurrentUser);
    const canManageWorkspace = useDashboardSelector(selectCanManageWorkspace);
    const canEdit = canManageWorkspace || (currentUser && currentUser.login === alert.createdBy?.login);
    const items = useMemo(() => {
        const deleteItem = {
            type: "interactive",
            id: "delete",
            stringTitle: formatMessage(labelMessages.delete),
            data: "delete",
        };
        return canEdit
            ? [
                {
                    type: "interactive",
                    id: "edit",
                    stringTitle: formatMessage(labelMessages.edit),
                    data: "edit",
                },
                {
                    type: "interactive",
                    id: "pause",
                    stringTitle: formatMessage(isPaused ? labelMessages.resume : labelMessages.pause),
                    data: "pause",
                },
                separatorStaticItem,
                deleteItem,
            ]
            : [deleteItem];
    }, [canEdit, formatMessage, isPaused]);
    const handleAction = useCallback((item) => {
        if (item.type !== "interactive") {
            return;
        }
        // If the action opens a modal, we want to return focus to the list when the modal is closed.
        document.getElementById(listId)?.focus();
        switch (item.data) {
            case "edit":
                onEdit();
                break;
            case "pause":
                onTogglePause();
                break;
            case "delete":
                onDelete();
        }
    }, [listId, onDelete, onEdit, onTogglePause]);
    return (_jsxs("div", { className: cx(b({
            readonly: !canEdit,
            isFocused: !!focusedAction,
            isFocusedSelectItem: focusedAction === SELECT_ITEM_ACTION || focusedAction === "item",
            isActive: isDropdownOpen,
        }), "s-alert"), children: [
            _jsxs("div", { className: e("content"), onClick: canEdit ? onEdit : undefined, children: [
                    _jsx("div", { className: cx(e("icon-container")), children: _jsx("div", { className: cx(e("icon", { invalid: !isValid })), children: isValid ? (isPaused ? iconPaused : iconActive) : iconError }) }), _jsxs("div", { className: e("text-content"), children: [
                            _jsx("div", { className: e("title"), children: _jsx(ShortenedText, { className: e("shortened-text"), tooltipAlignPoints: TEXT_TOOLTIP_ALIGN_POINTS, children: alert.title ?? intl.formatMessage({ id: "dialogs.alerting.title.placeholder" }) }) }), isSubtitleVisible ? (_jsx("div", { className: e("subtitle"), children: _jsx(ShortenedText, { className: e("shortened-text"), tooltipAlignPoints: TEXT_TOOLTIP_ALIGN_POINTS, children: subtitle }) })) : null] })
                ] }), _jsx(Dropdown, { isOpen: isDropdownOpen, onToggle: onToggleDropdown, className: e("menu"), alignPoints: [{ align: "br tr" }, { align: "tr br" }], autofocusOnOpen: true, shouldTrapFocus: false, returnFocusTo: listId, renderButton: ({ buttonRef, accessibilityConfig, toggleDropdown, isOpen }) => {
                    return (_jsx(Button, { tabIndex: -1, className: cx(e("menu-icon", { isFocused: focusedAction === "dropdown" && !isOpen })), id: `alert-menu-${alert.id}`, ref: buttonRef, onClick: toggleDropdown, accessibilityConfig: accessibilityConfig, children: _jsx(IconEllipsis, {}) }));
                }, renderBody: ({ ariaAttributes, closeDropdown }) => {
                    return (_jsx(UiListbox, { items: items, onClose: closeDropdown, shouldCloseOnSelect: true, ariaAttributes: ariaAttributes, onSelect: handleAction }));
                } })] }));
}
//# sourceMappingURL=Alert.js.map