import { a3 as s, am as u, gQ as C, gR as x, H as t, gS as f, _ as a } from "./56c67d3b.js";
import { useContext as m } from "react";
import "react-dom";
const b = s.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;
  }
`, $ = s.div`
  position: relative;
`;
function z(e) {
  var n;
  const r = e.layout, {
    selectable: l,
    minHeight: c,
    maxWidth: d
  } = e, i = m(u), p = (((n = m(C)) == null ? void 0 : n.theme) || x).canvas;
  return /* @__PURE__ */ t(b, {
    $bgColor: p,
    $maxWidth: d,
    $minHeight: c,
    children: r.map((h, g) => {
      const o = e.items[h.i];
      return o ? /* @__PURE__ */ t($, {
        children: /* @__PURE__ */ t(f, {
          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: i.selectedCompNames.has(o.name),
          onClick: () => {
            i.setSelectedCompNames(/* @__PURE__ */ new Set([o.name]));
          },
          hidden: o.hidden,
          children: o.view
        })
      }, o.name) : null;
    })
  });
}
export {
  z as FlowContainerView
};
