import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Loader2 } from "lucide-react";
import { useEditContext } from "../client/editContext";
import { AlertCircle } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
import { measureBridgeFieldRect, rectEquals, } from "./overlay/geometry";
import { useOverlayMeasurement } from "./overlay/useOverlayMeasurement";
export function FieldActionIndicator({ action, pageViewContext, }) {
    const editContext = useEditContext();
    if (!editContext)
        return null;
    const effectivePageViewContext = pageViewContext ??
        editContext.getActiveSlotContext()?.primaryPageViewContext;
    if (!effectivePageViewContext)
        return null;
    return (_jsx(SingleBridgeIndicator, { action: action, pageViewContext: effectivePageViewContext }));
}
function SingleBridgeIndicator({ action, pageViewContext, }) {
    const editContext = useEditContext();
    const indicatorRect = useOverlayMeasurement((metrics) => measureBridgeFieldRect(pageViewContext.bridgeGeometry, pageViewContext.bridgeStructure, action.field, metrics), [
        pageViewContext.bridgeGeometry,
        pageViewContext.bridgeStructure,
        action.field.fieldId,
        action.field.item.id,
        action.field.item.language,
        action.field.item.version,
        action.state,
        action.message,
    ], {
        initialValue: null,
        equals: rectEquals,
        interests: ["viewport", "layout", "text", "adornment-data"],
    });
    if (!indicatorRect)
        return null;
    return (_jsx(FieldActionAdornment, { action: action, editContext: editContext, rect: indicatorRect }));
}
function FieldActionAdornment({ action, editContext, rect, }) {
    const isRunning = action.state === "running";
    const isError = action.state === "error";
    return (_jsxs("div", { className: `${isRunning ? "focus-shadow executing-action bg-highlight-100/20" : ""} pointer-events-none absolute`, style: {
            left: rect.x,
            top: rect.y,
            width: rect.width,
            height: rect.height,
            zIndex: 800,
        }, children: [isRunning && (_jsx("div", { className: "text-highlight-100 rounded-mdp-3 bg-highlight-10 border-highlight-100 text-3xs pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-1.5 rounded border p-1 font-bold", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), action.message && _jsx("div", { className: "text-3xs", children: action.message })] }) })), isError && (_jsx("div", { className: "pointer-events-auto absolute top-1 right-1", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { className: "bg-feedback-red-light text-feedback-red ring-feedback-red hover:bg-feedback-red-light flex h-5 w-5 items-center justify-center rounded-full shadow-sm ring-1", "aria-label": "Show error", children: _jsx(AlertCircle, { strokeWidth: 1, className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { align: "end", side: "top", className: "w-80 p-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { strokeWidth: 1, className: "text-feedback-red mt-0.5 h-4 w-4" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-feedback-red text-sm font-medium", children: action.label || "Error" }), action.message && (_jsx("div", { className: "text-neutral-grey-100 mt-1 text-xs break-words whitespace-pre-wrap", children: action.message }))] })] }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsx("button", { className: "border-border-default badge-pad hover:bg-neutral-grey-5 rounded border text-xs", onClick: (e) => {
                                            e.stopPropagation();
                                            if (editContext)
                                                editContext.dismissFieldAction(action.field);
                                        }, "data-testid": "field-action-error-dismiss", children: "Dismiss" }) })] })] }) }))] }));
}
//# sourceMappingURL=FieldActionIndicator.js.map