import { b9 as m, bg as u, gb as C, fG as b, V as t, hn as x, c1 as a } from "./684d2f28.js";
import { useContext as s } from "react";
import "react-dom";
const f = m.div`
  background-color: ${(e) => e.$bgColor};
  max-width: ${(e) => e.$maxWidth}px;
  min-height: ${(e) => e.$minHeight};
  display: flex;
  flex-direction: column;

  > div {
    margin-bottom: 2px;
  }
`, $ = m.div`
  position: relative;
`;
function z(e) {
  var i;
  const r = e.layout, {
    selectable: l,
    minHeight: c,
    maxWidth: d
  } = e, n = s(u), p = (((i = s(C)) == null ? void 0 : i.theme) || b).canvas;
  return /* @__PURE__ */ t(f, {
    $bgColor: p,
    $maxWidth: d,
    $minHeight: c,
    children: r.map((h, g) => {
      const o = e.items[h.i];
      return o ? /* @__PURE__ */ t($, {
        children: /* @__PURE__ */ t(x, {
          compType: o.compType,
          isSelectable: l,
          isDraggable: !1,
          isResizable: !1,
          resizeIconSize: "normal",
          onInnerResize: a.noop,
          onWrapperResize: a.noop,
          nameConfig: {
            show: !0,
            name: o.name,
            pos: g === 0 ? "bottom" : "top"
          },
          autoHeight: !1,
          resizeHandles: [],
          isSelected: n.selectedCompNames.has(o.name),
          onClick: () => {
            n.setSelectedCompNames(/* @__PURE__ */ new Set([o.name]));
          },
          hidden: o.hidden,
          children: o.view
        })
      }, o.name) : null;
    })
  });
}
export {
  z as FlowContainerView
};
