import { jsx as i, jsxs as L, Fragment as z } from "react/jsx-runtime";
import ie from "../../../components/base/block-placeholder.js";
import { EditorRenderBlock as se } from "../../../components/base/editor-render-block.js";
import { BuilderConfiguration as le } from "../../../config/builder.config.js";
import { useBlockSettings as ce } from "../../../hooks/use-block-settings.js";
import { useContainerSettings as ae } from "../../../hooks/use-container-settings.js";
import { selectBlock as fe, setBlockSettingsValueByKey as de, setBlockAdvancedSettingsValueByKey as pe, addBlocks as k, moveBlock as E } from "../../../store/builder-slice.js";
import { getIsBlockSelected as ge } from "../../../../../../store/selectors.js";
import { Direction as u } from "../../../types/index.js";
import { FlexDirection as H, Position as t, Unit as M } from "../../../types/style.js";
import { BlockType as D } from "../../../types/block.js";
import { classNames as K, createBlock as N } from "../../../utils/index.js";
import { isDropableBlock as R, isMoveableBlock as T } from "../../../utils/guard.js";
import { useAppDispatch as ue } from "../../../hooks/use-app-dispatch.js";
import { useAppSelector as me } from "../../../hooks/use-app-selector.js";
import { useRef as F, useState as he, memo as Te } from "react";
import { BiPlus as ve } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import V from "../container.config.js";
import Ie from "./container-resizer.js";
import G from "./container-spacer.js";
import Oe from "./container-toolbar.js";
import { useDrag as Re } from "../../../../../../node_modules/.pnpm/react-dnd@16.0.1_@types_node@22.13.4_@types_react@19.0.10_react@19.0.0/node_modules/react-dnd/dist/hooks/useDrag/useDrag.js";
import { useDrop as j } from "../../../../../../node_modules/.pnpm/react-dnd@16.0.1_@types_node@22.13.4_@types_react@19.0.10_react@19.0.0/node_modules/react-dnd/dist/hooks/useDrop/useDrop.js";
import { DragPreviewImage as Be } from "../../../../../../node_modules/.pnpm/react-dnd@16.0.1_@types_node@22.13.4_@types_react@19.0.10_react@19.0.0/node_modules/react-dnd/dist/core/DragPreviewImage.js";
const _e = ({
  id: n,
  type: B,
  parentId: s,
  index: o,
  attributes: C,
  children: y,
  meta: Z,
  isEditable: W
}) => {
  const g = F(null), P = F(null), c = ue(), d = s !== "root", m = me(ge(n)), [A] = ce(
    s,
    "flexDirection.{{BREAKPOINT}}"
  ), v = A === H.ROW || A === H.ROW_REVERSE ? u.HORIZONTAL : u.VERTICAL, [r, I] = he(null), x = le.getBlockTypes(), { settings: Y, advancedSettings: U } = ae(), { className: _, ...$ } = C, [{ isDragging: q }, J, Q] = Re({
    type: B,
    item: {
      id: n,
      index: o,
      parentId: s
    },
    collect: (e) => ({
      isDragging: e.isDragging()
    })
  }), [{ isOver: h }, ee] = j({
    accept: x,
    drop: (e, a) => {
      if (!a.didDrop()) {
        if (R(e)) {
          const l = [];
          if (e.type !== D.CONTAINER && s === "root") {
            const O = N({
              type: D.CONTAINER,
              parentId: "root",
              settings: Y,
              advancedSettings: U
            });
            l.push(O);
          }
          const f = N({
            ...e,
            parentId: s === "root" && e.type !== D.CONTAINER ? l[0].id : s
          });
          l.push(f), (r === t.TOP || r === t.LEFT) && c(k({ blocks: l, selectedBlockId: f.id, index: o })), (r === t.BOTTOM || r === t.RIGHT) && c(k({ blocks: l, selectedBlockId: f.id, index: o + 1 }));
        }
        T(e) && ((r === t.TOP || r === t.LEFT) && c(
          E({
            sourceId: e.id,
            targetId: s,
            targetIndex: o
          })
        ), (r === t.BOTTOM || r === t.RIGHT) && c(
          E({
            sourceId: e.id,
            targetId: s,
            targetIndex: o + 1
          })
        ));
      }
    },
    hover: (e, a) => {
      if (!g.current || !a.isOver() || !a.canDrop() || T(e) && e.index === o && e.parentId === s)
        return;
      const p = g.current.getBoundingClientRect(), l = (p.bottom - p.top) / 2, f = (p.right - p.left) / 2, O = a.getClientOffset(), w = O.y - p.top, S = O.x - p.left;
      v === u.VERTICAL && w < l && I(t.TOP), v === u.HORIZONTAL && S > f && I(t.RIGHT), v === u.VERTICAL && w > l && I(t.BOTTOM), v === u.HORIZONTAL && S < f && I(t.LEFT);
    },
    collect: (e) => ({
      isOver: e.isOver({ shallow: !0 }) && e.canDrop() && (R(e.getItem()) || T(e.getItem()))
    })
  }), [{ isOver: te }, re] = j({
    accept: x,
    drop: (e, a) => {
      if (!a.didDrop()) {
        if (R(e)) {
          const l = [], f = N({
            ...e,
            parentId: n
          });
          l.push(f), c(
            k({
              blocks: l,
              selectedBlockId: f.id
            })
          );
          return;
        }
        T(e) && c(
          E({
            sourceId: e.id,
            targetId: n,
            targetIndex: o
          })
        );
      }
    },
    collect: (e) => ({
      isOver: e.isOver({ shallow: !0 }) && e.canDrop() && (R(e.getItem()) || T(e.getItem()))
    })
  }), oe = (e) => {
    e.stopPropagation(), c(fe(n));
  }, ne = (e) => {
    c(
      de({
        id: n,
        values: [
          { key: "width.{{BREAKPOINT}}.value", value: e },
          { key: "width.{{BREAKPOINT}}.unit", value: M.PERCENTAGE }
        ]
      })
    );
  }, b = (e, a) => {
    c(
      pe({
        id: n,
        values: [
          { key: `padding.{{BREAKPOINT}}.${a}`, value: e },
          { key: "padding.{{BREAKPOINT}}.unit", value: M.PX }
        ]
      })
    );
  };
  return ee(g), re(P), /* @__PURE__ */ i(Oe, { id: n, index: o, isInner: d, dragRef: J, children: /* @__PURE__ */ L(
    "div",
    {
      className: K(
        n,
        "group relative flex w-full flex-col",
        !d && "items-center justify-center after:pointer-events-none after:absolute after:left-0 after:top-0 after:z-10 after:h-full after:w-full after:ring-inset",
        !d && m && "after:ring-1  after:ring-inset after:ring-slate-800",
        !d && !m && "after:ring-inset hover:after:ring-1 hover:after:ring-slate-800",
        d && m && "ring-1 ring-inset ring-slate-800",
        d && !m && "ring-inset hover:ring-1 hover:ring-slate-800",
        h && r === t.TOP && "mt-2",
        h && r === t.RIGHT && "me-2",
        h && r === t.BOTTOM && "mb-2",
        h && r === t.LEFT && "ms-2",
        _
      ),
      ref: g,
      onClick: oe,
      ...$,
      children: [
        h && !!r && /* @__PURE__ */ i(ie, { position: r }),
        /* @__PURE__ */ i(
          "div",
          {
            className: K(
              "content relative mx-auto flex w-full max-w-[1140px]",
              q && "opacity-30 *:pointer-events-none",
              te && y.length === 0 && "bg-slate-50"
            ),
            ref: P,
            children: /* @__PURE__ */ i(X, { blocks: y, meta: Z, isEditable: W ?? !1 })
          }
        ),
        V.previewImage && /* @__PURE__ */ i(Be, { connect: Q, src: V.previewImage }),
        d && /* @__PURE__ */ i(Ie, { containerRef: g, onChange: ne }),
        !d && m && /* @__PURE__ */ L(z, { children: [
          /* @__PURE__ */ i(
            G,
            {
              containerRef: g,
              position: t.TOP,
              onChange: b
            }
          ),
          /* @__PURE__ */ i(
            G,
            {
              containerRef: g,
              position: t.BOTTOM,
              onChange: b
            }
          )
        ] })
      ]
    }
  ) });
}, X = Te(({ blocks: n, meta: B, isEditable: s }) => n.length ? /* @__PURE__ */ i(z, { children: n.map((o, C) => /* @__PURE__ */ i(
  se,
  {
    index: C,
    block: o,
    meta: B,
    isEditable: s
  },
  typeof o == "string" ? o : o.id
)) }) : /* @__PURE__ */ i(
  "div",
  {
    className: "pointer-events-none flex h-full min-h-[80px] w-full items-center justify-center border border-dashed border-slate-300",
    children: /* @__PURE__ */ i(ve, { size: 30, className: "text-slate-300" })
  }
));
X.displayName = "RenderChildren";
export {
  _e as default
};
//# sourceMappingURL=container-dnd-handler.js.map
