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 { SimpleIconButtonStyleProvider } from "../ui/SimpleIconButton";
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 currentHasContent = visibilityMap.current.get(section.key);
            const anyPrevHasContent = sections
                .slice(0, index)
                .some((s) => visibilityMap.current.get(s.key));
            return (_jsxs(React.Fragment, { children: [anyPrevHasContent && currentHasContent && (_jsx(Separator, { size: "large" })), _jsx(SectionWrapper, { sectionKey: section.key, onRenderChange: handleRenderChange, children: section.component })] }, section.key));
        });
    }, [handleRenderChange]);
    return (_jsx(SimpleIconButtonStyleProvider, { className: "border-transparent hover:border-transparent", children: _jsxs("div", { className: "scrollbar-hide flex h-12 shrink-0 items-center justify-between gap-2 overflow-x-auto overflow-y-clip border-b px-2 pt-1 pb-1 has-[[data-affects-toolbar-height]]:pt-2 md:overflow-clip md:px-2 md:py-2", "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