import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useState } from "react";
import { FormattedMessage } from "react-intl";
import { Bubble, BubbleHoverTrigger, Button, IconQuestionMark, } from "@gooddata/sdk-ui-kit";
import { useTheme } from "@gooddata/sdk-ui-theme-provider";
import { AlertTriggerModeSelect } from "../../../../automations/alerting/DefaultAlertingDialog/components/AlertTriggerModeSelect.js";
import { gdColorStateBlank } from "../../../../constants/colors.js";
const TOOLTIP_ALIGN_POINTS = [
    { align: "cr cl", offset: { x: 0, y: -1 } },
    { align: "cl cr", offset: { x: 0, y: -1 } },
];
export function EditAlertConfiguration({ alert, onCancel, onUpdate, overlayPositionType, }) {
    const [updatedAlert, setUpdatedAlert] = useState(alert);
    const canSubmit = updatedAlert.alert?.trigger.mode !== alert.alert?.trigger.mode;
    const theme = useTheme();
    const accessibilityValue = "alert.configuration.trigger";
    return (_jsxs("div", { className: "gd-edit-alert-configuration", children: [
            _jsxs("div", { className: "gd-edit-alert-configuration__form", children: [
                    _jsxs("label", { htmlFor: accessibilityValue, className: "gd-edit-alert-configuration__trigger-label", children: [
                            _jsx(FormattedMessage, { id: "insightAlert.config.trigger" }), _jsxs(BubbleHoverTrigger, { children: [
                                    _jsx(IconQuestionMark, { className: "gd-edit-alert-configuration__trigger-label-icon", color: theme?.palette?.complementary?.c6 ?? gdColorStateBlank, width: 14, height: 14 }), _jsx(Bubble, { alignPoints: TOOLTIP_ALIGN_POINTS, children: _jsx(FormattedMessage, { id: "insightAlert.config.trigger.tooltip" }) })
                                ] })
                        ] }), _jsx("div", { className: "gd-edit-alert-configuration__trigger-select", children: _jsx(AlertTriggerModeSelect, { id: accessibilityValue, selectedTriggerMode: updatedAlert.alert?.trigger.mode ?? "ALWAYS", onTriggerModeChange: (triggerMode) => {
                                setUpdatedAlert({
                                    ...updatedAlert,
                                    alert: {
                                        ...updatedAlert.alert,
                                        trigger: {
                                            ...updatedAlert.alert.trigger,
                                            mode: triggerMode,
                                        },
                                    },
                                });
                            }, overlayPositionType: overlayPositionType }) })
                ] }), _jsx("div", { className: "gd-edit-alert-configuration__buttons", children: _jsxs("div", { children: [
                        _jsx(Button, { variant: "secondary", size: "small", onClick: () => {
                                onCancel();
                            }, children: _jsx(FormattedMessage, { id: "cancel" }) }), _jsx(Button, { intent: "action", size: "small", disabled: !canSubmit, onClick: () => onUpdate(updatedAlert), children: _jsx(FormattedMessage, { id: "save" }) })
                    ] }) })
        ] }));
}
