import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useEditContext, useFieldsEditContext, } from "../client/editContext";
import { useFieldModification } from "../client/fieldModificationStore";
import { useSlotContext } from "../views/editorSlotContext";
import { measureElementRect, rectEquals, } from "./overlay/geometry";
import { useOverlayMeasurement } from "./overlay/useOverlayMeasurement";
export function FieldEditedIndicator({ field, pageViewContext, }) {
    const editContext = useEditContext();
    const fieldsContext = useFieldsEditContext();
    if (!editContext)
        return null;
    const pageVersion = pageViewContext.pageItemDescriptor?.version;
    const isTargetingCurrentPageLatest = field.item.version === 0 &&
        field.item.id === pageViewContext.pageItemDescriptor?.id &&
        field.item.language === pageViewContext.pageItemDescriptor?.language;
    // Use a selector that can match either the specific version or version 0 (latest)
    const selector = isTargetingCurrentPageLatest
        ? `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"]`
        : `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"]`;
    const fieldElements = pageViewContext.editorIframe?.contentWindow?.document.querySelectorAll(selector);
    if (!fieldElements)
        return null;
    return (_jsx(_Fragment, { children: [...fieldElements]
            .filter((x) => {
            if (x == fieldsContext?.inlineEditingFieldElement)
                return false;
            // Final filter for version matching
            const elVersion = parseInt(x.getAttribute("data-version") || "0", 10);
            if (field.item.version === 0) {
                // If update is for version 0, only show if element is version 0 OR matches current page version
                return elVersion === 0 || elVersion === pageVersion;
            }
            return elVersion === field.item.version;
        })
            .map((element, index) => (_jsx(SingleFieldEditedIndicator, { element: element, field: field }, field.fieldId + field.item.id + index))) }));
}
function SingleFieldEditedIndicator({ element, field, }) {
    const slotContext = useSlotContext();
    const { isSaved } = useFieldModification(field.fieldId, field.item.id, field.item.language, field.item.version, slotContext?.fieldModificationStore);
    const indicatorRect = useOverlayMeasurement((metrics) => measureElementRect(element, metrics), [element, field.timestamp], {
        initialValue: null,
        equals: rectEquals,
        interests: ["viewport", "layout", "text", "adornment-data"],
    });
    if (!indicatorRect)
        return null;
    // Logic:
    // If isSaved is false (isDirty is true), show saving (Yellow/Purple)
    // If isSaved is true, show saved (Green)
    const stateClass = isSaved ? "saved" : "saving";
    return (_jsx("div", { className: `focus-shadow edited-field ${stateClass} pointer-events-none absolute`, style: {
            left: indicatorRect.x,
            top: indicatorRect.y,
            width: indicatorRect.width,
            height: indicatorRect.height,
            zIndex: 800,
        } }));
}
//# sourceMappingURL=FieldEditedIndicator.js.map