import { jsxs as M, jsx as u } from "react/jsx-runtime";
import { Tooltip as c } from "../../../components/shared/tooltip.js";
import { useFrame as R } from "../../../hooks/use-frame.js";
import { useRef as S, useState as v, useEffect as W } from "react";
const j = ({ containerRef: m, onChange: o }) => {
  const { window: i, document: t } = R(), l = S(null), [x, E] = v(null), [z, a] = v(!1);
  return W(() => {
    if (!m.current || !l.current || !i || !t)
      return;
    const n = m.current, f = n.parentElement, p = l.current, b = i.getComputedStyle(n), y = i.getComputedStyle(f);
    let e = parseInt(b.width, 10), s = (e / f.offsetWidth * 100).toFixed(2);
    const I = parseInt(y.width, 10);
    let d = 0;
    const w = (r) => {
      const L = r.clientX - d;
      d = r.clientX, e = e + L, e < 0 && (e = 0), s = (e / I * 100).toFixed(2), n.style.width = `${s}%`, E(Number(s)), a(!0);
    }, g = () => {
      n.removeAttribute("style"), o == null || o(Number(s)), a(!1), t.removeEventListener("mousemove", w);
    }, h = (r) => {
      d = r.clientX, t.addEventListener("mousemove", w), t.addEventListener("mouseup", g);
    };
    return p.addEventListener("mousedown", h), () => {
      p.removeEventListener("mousedown", h);
    };
  }, []), /* @__PURE__ */ M(c, { open: z, children: [
    /* @__PURE__ */ u(c.Trigger, { asChild: !0, children: /* @__PURE__ */ u(
      "div",
      {
        ref: l,
        className: "absolute -right-1 top-0 z-10 h-full w-2 cursor-col-resize bg-transparent"
      }
    ) }),
    /* @__PURE__ */ u(c.Content, { side: "left", children: `${x}%` })
  ] });
};
export {
  j as default
};
//# sourceMappingURL=container-resizer.js.map
