import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { useEditContext } from "../client/editContext";
import { Separator } from "./Separator";
/**
 * Wrapper component that tracks whether content was actually rendered
 */
function SectionWrapper({ children, sectionKey, onRenderChange, }) {
    const ref = useRef(null);
    useEffect(() => {
        // Check if the wrapper has any visible content
        // A section has content if it has child elements or non-whitespace text
        const hasContent = ref.current &&
            (ref.current.children.length > 0 ||
                (ref.current.textContent?.trim() ?? "") !== "");
        onRenderChange(sectionKey, !!hasContent);
    }, [children, sectionKey, onRenderChange]);
    return (_jsx("div", { ref: ref, className: "contents", children: children }));
}
export function GenericToolbar({ left = [], center = [], right = [], }) {
    const visibilityMap = useRef(new Map());
    const [, forceUpdate] = useState(0);
    const editContext = useEditContext();
    const handleRenderChange = useCallback((key, hasContent) => {
        const currentValue = visibilityMap.current.get(key);
        if (currentValue !== hasContent) {
            visibilityMap.current.set(key, hasContent);
            forceUpdate((n) => n + 1);
        }
    }, []);
    const renderSections = useCallback((sections) => {
        return sections.map((section, index) => {
            const prevSection = index > 0 ? sections[index - 1] : null;
            const prevHasContent = prevSection && visibilityMap.current.get(prevSection.key);
            return (_jsxs(React.Fragment, { children: [index > 0 && prevHasContent && _jsx(Separator, { size: "large" }), _jsx(SectionWrapper, { sectionKey: section.key, onRenderChange: handleRenderChange, children: section.component })] }, section.key));
        });
    }, [handleRenderChange]);
    return (_jsxs("div", { className: "scrollbar-hide flex items-center justify-between gap-2 overflow-x-auto overflow-y-clip border-b px-1.5 pt-1 has-[[data-affects-toolbar-height]]:pt-2 pb-1 md:px-4 md:py-2 md:overflow-clip", "data-testid": "genericToolbar", children: [_jsx("div", { className: "flex items-center gap-1.5 md:gap-2", children: renderSections(left) }), !editContext?.isMobile && (_jsx("div", { className: "flex items-center gap-2", children: renderSections(center) })), _jsx("div", { className: "flex items-center gap-1.5 md:gap-2", children: renderSections(right) })] }));
}
//# sourceMappingURL=GenericToolbar.js.map