import { jsx as r, jsxs as m } from "react/jsx-runtime";
import { forwardRef as b } from "react";
import { b as g } from "./use-section-style.Cg6VYj5D.js";
import { u as x, E as h } from "./use-device-info.DDmUrtYw.js";
import { B as v } from "./BrickWrapper.BsQ9ga3q.js";
import { _ as s } from "./twind.BLUk_ZzT.js";
import { C as y } from "./dnd.esm.ByOls-Fs.js";
import { r as w } from "./_commonjsHelpers.BCwc0xb5.js";
import "@sinclair/typebox";
import { I as k } from "./IconRender.CerZIFDh.js";
import { J as D, r as j } from "./use-editor.CHZsl_Yo.js";
const q = b(({ brick: e, editable: o }, t) => {
  var l;
  const n = e.props, a = g(e), p = Object.values(a);
  return o ? /* @__PURE__ */ r("div", { className: s("flex flex-grow flex-col", ...p), ref: t, children: /* @__PURE__ */ r(N, { brick: e }) }) : /* @__PURE__ */ r("div", { className: s("flex flex-grow flex-col", Object.values(a)), ref: t, children: (l = n.$children) == null ? void 0 : l.map((i) => /* @__PURE__ */ r(v, { brick: i }, i.id)) });
}), z = (e, o, t) => {
  const n = w[t.draggableId];
  return /* @__PURE__ */ r(
    "button",
    {
      ...e.draggableProps,
      ...e.dragHandleProps,
      ref: e.innerRef,
      className: s(
        `rounded border border-upstart-100 border-upstart-600 bg-upstart-50 bg-white dark:bg-dark-700 !cursor-grab
        active:!cursor-grabbing touch-none select-none pointer-events-auto draggable-brick group aspect-square
        z-[99999] flex flex-col items-center justify-center
        [&:is(.clone)]:(opacity-80 !bg-white)`
      ),
      children: /* @__PURE__ */ m(
        "div",
        {
          className: s(
            "flex-1 flex flex-col justify-center text-upstart-700 dark:text-upstart-400 items-center gap-1 rounded-[inherit]"
          ),
          children: [
            /* @__PURE__ */ r(k, { manifest: n }),
            /* @__PURE__ */ r("span", { className: s("whitespace-nowrap text-xs"), children: n.name })
          ]
        }
      )
    }
  );
}, C = (e, o, t) => (
  // <div
  //   {...provided.draggableProps}
  //   {...provided.dragHandleProps}
  //   ref={provided.innerRef}
  //   style={{
  //     width: "200px",
  //     scale: 0.2,
  //   }}
  // />
  null
);
function N({ brick: e }) {
  const o = e.props, t = g(e), n = Object.values(t), { isDesktop: a } = x(), p = D(), l = j();
  return /* @__PURE__ */ r(
    y,
    {
      droppableId: e.id,
      type: "brick",
      isDropDisabled: !a,
      direction: "vertical",
      mode: "virtual",
      renderClone: C,
      children: (i, f) => {
        var u;
        return /* @__PURE__ */ r(
          "div",
          {
            ...i.droppableProps,
            ref: i.innerRef,
            className: s(
              "flex-grow flex flex-col justify-end",
              f.isDraggingOver && "!outline !outline-2 !outline-orange-300",
              (f.isDraggingOver || p) && "!overflow-y-hidden",
              f.isDraggingOver && "[&>*]:(!transform-none)",
              ...n
            ),
            children: ((u = o.$children) == null ? void 0 : u.length) > 0 ? o.$children.filter((c) => {
              var d;
              return !((d = c.props.hidden) != null && d[l]);
            }).map((c, d) => /* @__PURE__ */ r(h, { brick: c, isContainerChild: !0, index: d }, `${c.id}`)) : /* @__PURE__ */ m(
              "div",
              {
                className: s(
                  "w-full h-full text-center  border-4 border-gray-300 border-dotted p-4 rounded flex justify-center items-center text-base text-black/50 font-medium"
                ),
                children: [
                  "This is a container.",
                  /* @__PURE__ */ r("br", {}),
                  "Drag bricks here to stack them inside."
                ]
              }
            )
          }
        );
      }
    }
  );
}
export {
  q as default,
  z as renderClone
};
//# sourceMappingURL=vbox.DbVc0BDk.js.map
