import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { getAllComponentInstances } from "../componentTreeHelper";
import { useCanvasSelection, useEditContext } from "../client/editContext";
import { FrameMenu } from "./FrameMenu";
import { normalizeMarkerId } from "../utils";
function frameIdsMatch(left, right) {
    const normalizedLeft = normalizeMarkerId(left);
    const normalizedRight = normalizeMarkerId(right);
    return (!!normalizedLeft && !!normalizedRight && normalizedLeft === normalizedRight);
}
function expandFrameComponents(id, page) {
    if (!id)
        return [];
    const directComponents = getAllComponentInstances(id, page);
    if (directComponents.length > 0)
        return directComponents;
    const normalizedId = normalizeMarkerId(id);
    if (!normalizedId)
        return [];
    const allComponents = [];
    const visit = (component) => {
        allComponents.push(component);
        for (const placeholder of component.placeholders || []) {
            for (const child of placeholder.components || []) {
                visit(child);
            }
        }
    };
    visit(page.rootComponent);
    const exactMatches = allComponents.filter((component) => frameIdsMatch(component.id, id));
    if (exactMatches.length > 0)
        return exactMatches;
    const datasourceMatches = allComponents.filter((component) => frameIdsMatch(component.datasourceItem?.id, id));
    if (datasourceMatches.length > 0)
        return datasourceMatches;
    return [];
}
export function FrameMenus({ compareView, pageViewContext, openInsertMenuKey, onInsertMenuOpenChange, }) {
    const editContext = useEditContext();
    const selection = useCanvasSelection();
    const insertionFrameMode = !!(editContext?.dragObject ||
        editContext?.selectedForInsertion ||
        editContext?.insertMode);
    const targets = useMemo(() => {
        if (!pageViewContext.page)
            return [];
        const addComponents = (targetsById, components, isSelected) => {
            for (const component of components) {
                const key = normalizeMarkerId(component.id) || component.id;
                const existing = targetsById.get(key);
                if (existing) {
                    existing.isSelected = existing.isSelected || isSelected;
                }
                else {
                    targetsById.set(key, { component, isSelected });
                }
            }
        };
        // Defensive de-duplication in case selection expansion returns overlaps.
        const targetsById = new Map();
        if (!insertionFrameMode) {
            for (const id of selection) {
                addComponents(targetsById, expandFrameComponents(id, pageViewContext.page), true);
            }
        }
        return Array.from(targetsById.values());
    }, [
        editContext?.dragObject,
        editContext?.insertMode,
        editContext?.selectedForInsertion,
        insertionFrameMode,
        pageViewContext.page,
        selection,
    ]);
    const singleSelectionFrameKey = pageViewContext.page?.item.id
        ? `single-selection-frame-${pageViewContext.page.item.id}`
        : "single-selection-frame";
    return (_jsx(_Fragment, { children: targets.map(({ component, isSelected }, index) => (_jsx(FrameMenu, { component: component, isSelected: isSelected, compareView: compareView, pageViewContext: pageViewContext, openInsertMenuKey: openInsertMenuKey, onInsertMenuOpenChange: onInsertMenuOpenChange }, targets.length === 1
            ? singleSelectionFrameKey
            : component.id + index))) }));
}
//# sourceMappingURL=FrameMenus.js.map