"use client";
import { jsx as D, jsxs as j } from "react/jsx-runtime";
import { BuilderConfiguration as w } from "../../config/builder.config.js";
import { useBlockSettings as X } from "../../hooks/use-block-settings.js";
import { useContainerSettings as Y } from "../../hooks/use-container-settings.js";
import { addBlocks as k, moveBlock as E, selectBlock as K } from "../../store/builder-slice.js";
import { getIsBlockSelected as _ } from "../../../../../store/selectors.js";
import { Direction as p } from "../../types/index.js";
import { FlexDirection as C, Position as t } from "../../types/style.js";
import { BlockType as A } from "../../types/block.js";
import { createBlock as N, classNames as q } from "../../utils/index.js";
import { isDropableBlock as P, isMoveableBlock as O } from "../../utils/guard.js";
import { useAppDispatch as z } from "../../hooks/use-app-dispatch.js";
import { useAppSelector as J } from "../../hooks/use-app-selector.js";
import { useRef as Q, useState as U } from "react";
import $ from "./block-placeholder.js";
import oo from "./block-toolbar.js";
import { useDrag as to } 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 eo } 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";
const ko = ({
  blockId: c,
  index: n,
  blockType: B,
  parentId: r,
  attributes: x,
  children: L
}) => {
  const g = Q(null), { className: S, ...y } = x, H = w.getBlockTypes(), R = J(_(c)), [h] = X(
    r,
    "flexDirection.{{BREAKPOINT}}"
  ), { settings: M, advancedSettings: F } = Y(), m = h === C.ROW || h === C.ROW_REVERSE ? p.HORIZONTAL : p.VERTICAL, [e, T] = U(null), [{ isDragging: G }, V, b] = to({
    type: B,
    item: {
      id: c,
      index: n,
      parentId: r
    },
    collect: (o) => ({
      isDragging: o.isDragging()
    })
  }), [{ isOver: a }, W] = eo({
    accept: H,
    drop: (o, d) => {
      if (!d.didDrop()) {
        if (P(o)) {
          const i = [];
          if (o.type !== A.CONTAINER && r === "root") {
            const u = N({
              type: A.CONTAINER,
              parentId: "root",
              settings: M,
              advancedSettings: F
            });
            i.push(u);
          }
          const l = N({
            ...o,
            parentId: r === "root" ? i[0].id : r
          });
          i.push(l), (e === t.TOP || e === t.LEFT) && f(k({ blocks: i, selectedBlockId: l.id, index: n })), (e === t.BOTTOM || e === t.RIGHT) && f(k({ blocks: i, selectedBlockId: l.id, index: n + 1 }));
        }
        O(o) && ((e === t.TOP || e === t.LEFT) && f(
          E({
            sourceId: o.id,
            targetId: r,
            targetIndex: n
          })
        ), (e === t.BOTTOM || e === t.RIGHT) && f(
          E({
            sourceId: o.id,
            targetId: r,
            targetIndex: n + 1
          })
        ));
      }
    },
    hover: (o, d) => {
      if (!g.current || !d.isOver() || !d.canDrop() || O(o) && o.index === n && o.parentId === r)
        return;
      const s = g.current.getBoundingClientRect(), i = (s.bottom - s.top) / 2, l = (s.right - s.left) / 2, u = d.getClientOffset(), v = u.y - s.top, I = u.x - s.left;
      m === p.VERTICAL && v < i && T(t.TOP), m === p.HORIZONTAL && I > l && T(t.RIGHT), m === p.VERTICAL && v > i && T(t.BOTTOM), m === p.HORIZONTAL && I < l && T(t.LEFT);
    },
    collect: (o) => ({
      isOver: o.isOver({ shallow: !0 }) && o.canDrop() && (P(o.getItem()) || O(o.getItem()))
    })
  }), f = z(), Z = (o) => {
    o.stopPropagation(), f(K(c));
  };
  return W(g), /* @__PURE__ */ D(
    oo,
    {
      blockId: c,
      blockType: B,
      isSelected: R,
      dragRef: V,
      previewRef: b,
      children: /* @__PURE__ */ j(
        "div",
        {
          ref: g,
          id: c,
          className: q(
            c,
            "relative transition-all duration-200 ease-in-out",
            r === "root" && "ring-inset",
            R ? "ring-1 ring-slate-800" : "hover:ring-1 hover:ring-slate-800",
            a && e === t.TOP && "mt-2",
            a && e === t.RIGHT && "me-2",
            a && e === t.BOTTOM && "mb-2",
            a && e === t.LEFT && "ms-2",
            G && "opacity-30",
            S
          ),
          onClick: Z,
          ...y,
          children: [
            a && !!e && /* @__PURE__ */ D($, { position: e }),
            L
          ]
        }
      )
    }
  );
};
export {
  ko as default
};
//# sourceMappingURL=editor-block-wrapper.js.map
