import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEditContext } from "../client/editContext";
import { InlineEditor } from "./InlineEditor";
import { FieldActionsIndicators } from "./FieldActionIndicators";
import { PlaceholderDropZones } from "./PlaceholderDropZones";
import { PictureEditorOverlay } from "./PictureEditorOverlay";
import { LockedFieldIndicator } from "./LockedFieldIndicator";
import { FrameMenus } from "./FrameMenus";
import { FieldEditedIndicators } from "./FieldEditedIndicators";
import { CommentHighlightings } from "./CommentHighlightings";
import { SuggestionHighlightings } from "./SuggestionHighlightings";
import { VersionDiffHighlightings } from "./VersionDiffHighlightings";
import { useSlotContext } from "../views/editorSlotContext";
import { useOverlayMeasurement } from "./overlay/useOverlayMeasurement";
import { measureElementRect, rectEquals, } from "./overlay/geometry";
function canAccessIframeDocument(iframe) {
    if (!iframe)
        return false;
    try {
        return !!iframe.contentDocument;
    }
    catch {
        return false;
    }
}
export function PageEditorChrome(props) {
    const editContext = useEditContext();
    if (!editContext || !canAccessIframeDocument(props.iframe))
        return null;
    return _jsx(PageEditorChromeContent, { ...props, editContext: editContext });
}
function PageEditorChromeContent({ iframe, compareView, pageViewContext, editContext, }) {
    const slotContext = useSlotContext();
    return (_jsxs(_Fragment, { children: [_jsx(FrameMenus, { pageViewContext: pageViewContext, compareView: compareView }), _jsx(InlineEditor, { pageViewContext: pageViewContext, compareView: compareView }), _jsx(LockedFieldIndicator, { iframe: pageViewContext?.editorIframe }), _jsx(FieldActionsIndicators, { pageViewContext: pageViewContext }), editContext.showComments && (_jsx(CommentHighlightings, { iframe: pageViewContext?.editorIframe })), editContext.showSuggestedEdits && (_jsx(SuggestionHighlightings, { iframe: pageViewContext?.editorIframe })), editContext.showVersionDiffHighlighting && !compareView && (_jsx(VersionDiffHighlightings, { iframe: pageViewContext?.editorIframe, pageViewContext: pageViewContext })), _jsx(FieldEditedIndicators, { pageViewContext: pageViewContext }), editContext.mode === "edit" && (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZones, { iframe: pageViewContext?.editorIframe, size: "large", pageViewContext: pageViewContext }), _jsx(PictureEditorOverlay, { pageViewContext: pageViewContext }), slotContext?.isActive && _jsx(InsertingIndicator, {})] }))] }));
}
function InsertingIndicator() {
    const editContext = useEditContext();
    const inserting = editContext?.inserting;
    const position = useOverlayMeasurement((metrics) => {
        if (!inserting)
            return null;
        const rect = measureElementRect(inserting.positionElement, metrics);
        if (!rect)
            return null;
        let x = rect.x + rect.width / 2;
        let y = rect.y;
        if (inserting.positionAnchor === "bottom") {
            y = rect.y + rect.height;
        }
        else if (inserting.positionAnchor === "left") {
            x = rect.x;
            y = rect.y + rect.height / 2;
        }
        else if (inserting.positionAnchor === "right") {
            x = rect.x + rect.width;
            y = rect.y + rect.height / 2;
        }
        return {
            x: Math.min(metrics.scrollWidth - 20, Math.max(20, x)),
            y: Math.min(metrics.scrollHeight - 20, Math.max(20, y)),
            width: 0,
            height: 0,
        };
    }, [inserting], {
        initialValue: null,
        equals: rectEquals,
        interests: ["viewport", "layout", "adornment-data"],
    });
    if (!position)
        return null;
    return (_jsxs("div", { className: "absolute flex h-8 w-8", style: { top: position.y - 16, left: position.x - 16, zIndex: 1000 }, children: [_jsx("span", { className: "bg-feedback-blue absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" }), _jsx("span", { className: "bg-feedback-blue relative inline-flex h-8 w-8 rounded-full" })] }));
}
//# sourceMappingURL=PageEditorChrome.js.map