import { jsx as _jsx } from "react/jsx-runtime";
import { areSectionLayoutPathsEqual } from "../../../_staging/layout/coordinates.js";
import { useDashboardSelector } from "../../../model/react/DashboardStoreProvider.js";
import { selectActiveSection } from "../../../model/store/ui/uiSelectors.js";
import { useIsDraggingWidget } from "../../dragAndDrop/draggableWidget/useIsDraggingWidget.js";
import { DashboardLayoutSectionBorder } from "../dragAndDrop/draggableWidget/DashboardLayoutSectionBorder/DashboardLayoutSectionBorder.js";
import { GridLayoutElement } from "./GridLayoutElement.js";
const isHiddenStyle = { height: 0, width: 0, overflow: "hidden", flex: 0 };
const defaultStyle = {};
function useBorderStatus(section) {
    const activeSection = useDashboardSelector(selectActiveSection);
    const isDraggingWidget = useIsDraggingWidget();
    if (isDraggingWidget) {
        return { status: "muted", renderBottomBorder: section.isLast() };
    }
    const isActive = areSectionLayoutPathsEqual(activeSection, section.index());
    return isActive ? { status: "muted", renderBottomBorder: true } : { status: "invisible" };
}
export function EditableDashboardLayoutSectionRenderer({ children, className, isHidden, section, parentLayoutItemSize, showBorders, }) {
    const style = isHidden ? isHiddenStyle : defaultStyle;
    const { status, renderBottomBorder } = useBorderStatus(section);
    return (_jsx(GridLayoutElement, { type: "section", layoutItemSize: parentLayoutItemSize, className: className, style: style, children: showBorders ? (_jsx(DashboardLayoutSectionBorder, { status: status, renderBottomBorder: renderBottomBorder, itemSize: parentLayoutItemSize, children: children })) : (children) }));
}
//# sourceMappingURL=EditableDashboardLayoutSectionRenderer.js.map