import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { useEffect, useState } from "react";
import { LockedFieldIndicator } from "./LockedFieldIndicator";
import { FrameMenus } from "./FrameMenus";
import { FieldEditedIndicators } from "./FieldEditedIndicators";
import { CommentHighlightings } from "./CommentHighlightings";
import { SuggestionHighlightings } from "./SuggestionHighlightings";
import { useSlotContext } from "../views/editorSlotContext";
export function PageEditorChrome({ iframe, compareView, pageViewContext, }) {
    const editContext = useEditContext();
    const slotContext = useSlotContext();
    const [insertingStyle, setInsertingStyle] = useState();
    if (!editContext || !iframe?.contentDocument)
        return null;
    useEffect(() => {
        if (!editContext.inserting)
            setInsertingStyle(undefined);
        let insertingPosition;
        const insertingRect = editContext.inserting
            ? editContext.inserting.positionElement.getBoundingClientRect()
            : null;
        if (insertingRect) {
            if (editContext.inserting?.positionAnchor === "top")
                insertingPosition = {
                    y: insertingRect.y,
                    x: insertingRect.x + insertingRect.width / 2,
                };
            if (editContext.inserting?.positionAnchor === "bottom")
                insertingPosition = {
                    y: insertingRect.y + insertingRect.height,
                    x: insertingRect.x + insertingRect.width / 2,
                };
            if (editContext.inserting?.positionAnchor === "left")
                insertingPosition = {
                    y: insertingRect.y + insertingRect.height / 2,
                    x: insertingRect.x,
                };
            if (editContext.inserting?.positionAnchor === "right")
                insertingPosition = {
                    y: insertingRect.y + insertingRect.height / 2,
                    x: insertingRect.x + insertingRect.width,
                };
        }
        const getInsertingStyle = () => {
            if (!insertingPosition)
                return;
            const scale = pageViewContext.zoom;
            const x = Math.min(pageViewContext.viewport.width - 20, Math.max(20, insertingPosition.x * (scale || 1)));
            const y = Math.min(pageViewContext.viewport.height - 20, Math.max(20, insertingPosition.y * (scale || 1)));
            return {
                top: y - 16 + "px",
                left: x - 16 + "px",
                zIndex: 1000,
            };
        };
        const insertingStyle = getInsertingStyle();
        setInsertingStyle(insertingStyle);
    }, [editContext.inserting, pageViewContext.viewport]);
    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, scale: 1 })), editContext.showSuggestedEdits && (_jsx(SuggestionHighlightings, { iframe: pageViewContext?.editorIframe, scale: 1 })), _jsx(FieldEditedIndicators, { pageViewContext: pageViewContext }), editContext.mode === "edit" && (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZones, { iframe: pageViewContext?.editorIframe, size: "large", pageViewContext: pageViewContext }), _jsx(PictureEditorOverlay, { pageViewContext: pageViewContext }), insertingStyle && slotContext?.isActive && (_jsxs("div", { className: "absolute flex h-8 w-8", style: insertingStyle, children: [_jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75" }), _jsx("span", { className: "relative inline-flex h-8 w-8 rounded-full bg-sky-500" })] }))] }))] }));
}
//# sourceMappingURL=PageEditorChrome.js.map