import { jsx as b } from "react/jsx-runtime";
import { useFrame as I } from "../../../hooks/use-frame.js";
import { Position as r } from "../../../types/style.js";
import { classNames as v } from "../../../../../../utils.js";
import { useRef as z, useState as y, useEffect as P } from "react";
const f = {
  top: "paddingTop",
  bottom: "paddingBottom",
  left: "paddingLeft",
  right: "paddingRight"
}, R = {
  top: "top-0 left-0 h-[8px] w-full cursor-row-resize min-h-[8px]",
  bottom: "bottom-0 left-0 h-[8px] w-full cursor-row-resize min-h-[8px]",
  left: "left-0 top-0 h-full w-[8px] cursor-col-resize min-w-[8px]",
  right: "right-0 top-0 h-full w-[8px] cursor-col-resize min-w-[8px]"
}, S = ({ containerRef: p, position: e, onChange: u }) => {
  const { window: m, document: o } = I(), a = z(null), [O, i] = y(null), [g, x] = y(!1);
  return P(() => {
    if (!p.current || !a.current || !m || !o)
      return;
    const d = p.current, l = a.current, E = m.getComputedStyle(d);
    let t = parseInt(E[f[e]], 10);
    i(t);
    let n = 0;
    const T = (s) => {
      if (e === r.TOP || e === r.BOTTOM) {
        const c = s.clientY - n;
        n = s.clientY, t = t + c;
      }
      if (e === r.LEFT || e === r.RIGHT) {
        const c = s.clientX - n;
        n = s.clientX, t = e === r.LEFT ? t + c : t - c;
      }
      t < 0 && (t = 0), i(Number(t)), d.style[f[e]] = `${t}px`, (e === r.TOP || e === r.BOTTOM) && (l.style.height = `${t}px`), (e === r.LEFT || e === r.RIGHT) && (l.style.width = `${t}px`), x(!0);
    }, L = () => {
      d.removeAttribute("style"), u == null || u(Number(t), e), x(!1), o.removeEventListener("mousemove", T);
    }, w = (s) => {
      (e === r.TOP || e === r.BOTTOM) && (n = s.clientY), (e === r.LEFT || e === r.RIGHT) && (n = s.clientX), o.addEventListener("mousemove", T), o.addEventListener("mouseup", L);
    };
    l.addEventListener("mousedown", w);
    const h = new ResizeObserver((s) => {
      const c = s[0].target, M = m.getComputedStyle(c);
      t = parseInt(M[f[e]], 10), i(t), (e === r.TOP || e === r.BOTTOM) && (l.style.height = `${t}px`), (e === r.LEFT || e === r.RIGHT) && (l.style.width = `${t}px`);
    });
    return h.observe(d), () => {
      l.removeEventListener("mousedown", w), h.disconnect();
    };
  }, []), /* @__PURE__ */ b(
    "div",
    {
      ref: a,
      className: v(
        "group/spacer absolute flex items-center justify-center overflow-visible hover:bg-gray-50",
        R[e],
        g && "bg-gray-50"
      ),
      children: /* @__PURE__ */ b(
        "div",
        {
          className: v(
            "z-50 hidden rounded-sm bg-gray-900 p-1 text-xs leading-none text-white group-hover/spacer:inline-block",
            g && "inline-block"
          ),
          style: {
            userSelect: "none"
          },
          children: `${O}px`
        }
      )
    }
  );
};
export {
  S as default
};
//# sourceMappingURL=container-spacer.js.map
