import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback, useRef, useState } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { isInsightWidget } from "@gooddata/sdk-model";
import { IconAlert, IconAlertPaused, IconWarning, ShortenedText } 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";
import { AlertDropdown } from "./AlertDropdown.js";
const TEXT_TOOLTIP_ALIGN_POINTS = [
    { align: "tc bc", offset: { x: 0, y: 0 } },
    { align: "bc tc", offset: { x: 0, y: 0 } },
];
export function AlertOld({ alert, onDelete, onEdit, onPause }) {
    const theme = useTheme();
    const intl = useIntl();
    const { isValid } = useAlertValidation(alert);
    const iconColor = theme?.palette?.complementary?.c6 ?? gdColorStateBlank;
    const iconColorError = theme?.palette?.error?.base ?? gdColorNegative;
    const iconActive = _jsx(IconAlert, { width: 16, height: 16, color: iconColor });
    const iconPaused = _jsx(IconAlertPaused, { width: 16, height: 16, color: iconColor });
    const iconError = _jsx(IconWarning, { width: 16, height: 16, color: iconColorError });
    const paused = 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 [hover, setHover] = useState(false);
    const [dropdownOpened, toggleDropdownOpened] = useState(false);
    const buttonRef = useRef(null);
    const currentUser = useDashboardSelector(selectCurrentUser);
    const canManageWorkspace = useDashboardSelector(selectCanManageWorkspace);
    const canEdit = canManageWorkspace || (currentUser && currentUser.login === alert.createdBy?.login);
    const openDropdown = () => {
        toggleDropdownOpened(true);
        setHover(true);
    };
    const closeDropdown = () => {
        toggleDropdownOpened(false);
        setHover(false);
    };
    const handleEdit = useCallback(() => {
        onEdit(alert, insightWidget, buttonRef.current, () => {
            setHover(false);
        });
        closeDropdown();
        setHover(true);
    }, [alert, insightWidget, onEdit]);
    const handleRemove = useCallback(() => {
        onDelete(alert);
        closeDropdown();
    }, [alert, onDelete]);
    const handlePause = useCallback(() => {
        onPause(alert, true);
        closeDropdown();
    }, [alert, onPause]);
    const handleResume = useCallback(() => {
        onPause(alert, false);
        closeDropdown();
    }, [alert, onPause]);
    return (_jsxs("div", { className: cx("gd-notifications-channel gd-notifications-channel-old", "s-alert", {
            editable: false,
            hover,
        }), children: [dropdownOpened && buttonRef.current ? (_jsx(AlertDropdown, { isReadOnly: !canEdit, paused: paused, alignTo: buttonRef.current, onClose: closeDropdown, onEdit: handleEdit, onDelete: handleRemove, onPause: handlePause, onResume: handleResume })) : null, _jsx("div", { className: "gd-notifications-channel-menu", children: _jsx("span", { className: "gd-notifications-channel-menu-icon s-alert-menu-icon", id: `alert-menu-${alert.id}`, ref: buttonRef, onClick: openDropdown }) }), _jsxs("div", { className: "gd-notifications-channel-content", onClick: canEdit ? handleEdit : undefined, children: [
                    _jsx("div", { className: cx("gd-notifications-channel-icon", {
                            "gd-notifications-channel-icon-invalid": !isValid,
                        }), children: isValid ? (paused ? iconPaused : iconActive) : iconError }), _jsxs("div", { className: "gd-notifications-channel-text-content", children: [
                            _jsx("div", { className: "gd-notifications-channel-title", children: _jsx("strong", { children: _jsx(ShortenedText, { className: "gd-notifications-channel-shortened-text", tooltipAlignPoints: TEXT_TOOLTIP_ALIGN_POINTS, children: alert.title ??
                                            intl.formatMessage({ id: "dialogs.alerting.title.placeholder" }) }) }) }), _jsx("div", { children: _jsx("span", { className: "gd-notifications-channel-subtitle", children: _jsx(ShortenedText, { className: "gd-notifications-channel-shortened-text", tooltipAlignPoints: TEXT_TOOLTIP_ALIGN_POINTS, children: subtitle }) }) })
                        ] })
                ] })
        ] }));
}
//# sourceMappingURL=AlertOld.js.map