import { defineComponent, inject, shallowRef, reactive, ref, toRef, onBeforeMount, onMounted, watchEffect, onBeforeUnmount, computed, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot, createCommentVNode } from "vue";
import { isNull as ie, nextTickOnce as oo, throttle as eo } from "../../../@vexip-ui/utils/dist/index.mjs";
import { LAYOUT_KEY as T, EMITTER_KEY as v, useNameHelper as K, setTransformRtl as O, setTransform as G, setTopRight as V, setTopLeft as R } from "../helpers/common.mjs";
import { getControlPosition as a, createCoreData as i } from "../helpers/draggable.mjs";
import { getColsFromBreakpoint as B } from "../helpers/responsive.mjs";
import { getDocumentDir as r } from "../helpers/dom.mjs";
import He from "../../../../../_virtual/interact.min.mjs";
const st = /* @__PURE__ */ defineComponent({
  __name: "grid-item",
  props: {
    isDraggable: { type: Boolean, default: void 0 },
    isResizable: { type: Boolean, default: void 0 },
    isBounded: { type: Boolean, default: void 0 },
    static: { type: Boolean, default: false },
    minH: { default: 1 },
    minW: { default: 1 },
    maxH: { default: 1 / 0 },
    maxW: { default: 1 / 0 },
    x: {},
    y: {},
    w: {},
    h: {},
    i: {},
    dragIgnoreFrom: { default: "a, button" },
    dragAllowFrom: { default: void 0 },
    resizeIgnoreFrom: { default: "a, button" },
    preserveAspectRatio: { type: Boolean, default: false },
    dragOption: { default: () => ({}) },
    resizeOption: { default: () => ({}) }
  },
  emits: ["container-resized", "resize", "resized", "move", "moved"],
  setup(Se, { expose: Me, emit: We }) {
    const i$1 = Se, M = We, l = inject(T), g = inject(v);
    if (!l)
      throw new Error("[grid-layout-plus]: missing layout store, GridItem must under a GridLayout.");
    const d = shallowRef(null), e = reactive({
      cols: 1,
      containerWidth: 100,
      rowHeight: 30,
      margin: [10, 10],
      maxRows: 1 / 0,
      draggable: void 0,
      resizable: void 0,
      bounded: void 0,
      transformScale: 1,
      useCssTransforms: true,
      useStyleCursor: true,
      isDragging: false,
      dragging: {
        top: -1,
        left: -1
      },
      isResizing: false,
      resizing: {
        width: -1,
        height: -1
      },
      style: {},
      rtl: false
    });
    let X = false, _ = false, $ = NaN, G$1 = NaN, k = NaN, E = NaN, j = -1, K$1 = -1, V$1 = -1, q = -1, h = i$1.x, v$1 = i$1.y, p = i$1.w, y = i$1.h;
    const W = ref(), J = reactive({
      i: toRef(i$1, "i"),
      state: e,
      wrapper: W,
      calcXY: A
    });
    function Q(t) {
      Te(t);
    }
    function Z() {
      de();
    }
    function U(t) {
      ie(i$1.isDraggable) && (e.draggable = t);
    }
    function ee(t) {
      ie(i$1.isResizable) && (e.resizable = t);
    }
    function te(t) {
      ie(i$1.isBounded) && (e.bounded = t);
    }
    function ie$1(t) {
      e.transformScale = t;
    }
    function ae(t) {
      e.rowHeight = t;
    }
    function re(t) {
      e.maxRows = t;
    }
    function ne() {
      e.rtl = r() === "rtl", de();
    }
    function oe(t) {
      e.cols = Math.floor(t);
    }
    l.increaseItem(J), onBeforeMount(() => {
      e.rtl = r() === "rtl";
    }), onMounted(() => {
      l.responsive && l.lastBreakpoint ? e.cols = B(l.lastBreakpoint, l.cols) : e.cols = l.colNum, e.rowHeight = l.rowHeight, e.containerWidth = l.width !== null ? l.width : 100, e.margin = l.margin !== void 0 ? l.margin.map(Number) : [10, 10], e.maxRows = l.maxRows, ie(i$1.isDraggable) ? e.draggable = l.isDraggable : e.draggable = i$1.isDraggable, ie(i$1.isResizable) ? e.resizable = l.isResizable : e.resizable = i$1.isResizable, ie(i$1.isBounded) ? e.bounded = l.isBounded : e.bounded = i$1.isBounded, e.transformScale = l.transformScale, e.useCssTransforms = l.useCssTransforms, e.useStyleCursor = l.useStyleCursor, watchEffect(() => {
        h = i$1.x, v$1 = i$1.y, y = i$1.h, p = i$1.w, oo(H);
      }), g.on("updateWidth", Q), g.on("compact", Z), g.on("setDraggable", U), g.on("setResizable", ee), g.on("setBounded", te), g.on("setTransformScale", ie$1), g.on("setRowHeight", ae), g.on("setMaxRows", re), g.on("directionchange", ne), g.on("setColNum", oe);
    }), onBeforeUnmount(() => {
      g.off("updateWidth", Q), g.off("compact", Z), g.off("setDraggable", U), g.off("setResizable", ee), g.off("setBounded", te), g.off("setTransformScale", ie$1), g.off("setRowHeight", ae), g.off("setMaxRows", re), g.off("directionchange", ne), g.off("setColNum", oe), d.value && (d.value.unset(), d.value = null), l.decreaseItem(J);
    }), Me({ state: e, wrapper: W });
    const Be = typeof navigator < "u" ? navigator.userAgent.toLowerCase().includes("android") : false, se = computed(() => e.resizable && !i$1.static), m = computed(() => l.isMirrored ? !e.rtl : e.rtl), Ce = computed(() => (e.draggable || e.resizable) && !i$1.static), z = K("item"), De = computed(() => ({
      [z.b()]: true,
      [z.bm("resizable")]: se.value,
      [z.bm("static")]: i$1.static,
      [z.bm("resizing")]: e.isResizing,
      [z.bm("dragging")]: e.isDragging,
      [z.bm("transform")]: e.useCssTransforms,
      [z.bm("rtl")]: m.value,
      [z.bm("no-touch")]: Be && Ce.value
    })), T$1 = computed(() => [z.be("resizer"), m.value && z.bem("resizer", "rtl")].filter(Boolean));
    watch(
      () => i$1.isDraggable,
      (t) => {
        e.draggable = t;
      }
    ), watch(
      () => i$1.static,
      () => {
        oo(ue), oo(S);
      }
    ), watch(
      () => e.draggable,
      () => {
        oo(ue);
      }
    ), watch(
      () => i$1.isResizable,
      (t) => {
        e.resizable = t;
      }
    ), watch(
      () => i$1.isBounded,
      (t) => {
        e.bounded = t;
      }
    ), watch(
      () => e.resizable,
      () => {
        oo(S);
      }
    ), watch(
      () => e.rowHeight,
      () => {
        oo(H), oo(F);
      }
    ), watch([() => e.cols, () => e.containerWidth], () => {
      oo(S), oo(H), oo(F);
    }), watch([() => i$1.minH, () => i$1.maxH, () => i$1.minW, () => i$1.maxW], () => {
      oo(S);
    }), watch(m, () => {
      oo(S), oo(H);
    }), watch([() => l.margin, () => l.margin[0], () => l.margin[1]], () => {
      const t = l.margin;
      !t || t[0] === e.margin[0] && t[1] === e.margin[1] || (e.margin = t.map(Number), oo(H), oo(F));
    });
    function H() {
      i$1.x + i$1.w > e.cols ? (h = 0, p = i$1.w > e.cols ? e.cols : i$1.w) : (h = i$1.x, p = i$1.w);
      const t = B$1(h, v$1, p, y);
      e.isDragging && (t.top = e.dragging.top, m.value ? t.right = e.dragging.left : t.left = e.dragging.left), e.isResizing && (t.width = e.resizing.width, t.height = e.resizing.height);
      let r2;
      e.useCssTransforms ? m.value ? r2 = O(t.top, t.right, t.width, t.height) : r2 = G(t.top, t.left, t.width, t.height) : m.value ? r2 = V(t.top, t.right, t.width, t.height) : r2 = R(t.top, t.left, t.width, t.height), e.style = r2;
    }
    function F() {
      const t = {};
      for (const r2 of ["width", "height"]) {
        const o = e.style[r2].match(/^(\d+)px$/);
        if (!o)
          return;
        t[r2] = o[1];
      }
      M("container-resized", i$1.i, i$1.h, i$1.w, t.height, t.width);
    }
    function le(t) {
      if (i$1.static) return;
      const r2 = t.type;
      if (r2 === "resizestart" && e.isResizing || r2 !== "resizestart" && !e.isResizing)
        return;
      const s = a(t);
      if (ie(s)) return;
      const { x: o, y: c } = s, n = { width: 0, height: 0 };
      let a$1;
      switch (r2) {
        case "resizestart": {
          S(), j = p, K$1 = y, a$1 = B$1(h, v$1, p, y), n.width = a$1.width, n.height = a$1.height, e.resizing = n, e.isResizing = true;
          break;
        }
        case "resizemove": {
          !t.edges.right && !t.edges.left && (k = o), !t.edges.top && !t.edges.bottom && (E = c);
          const u = i(k, E, o, c);
          m.value ? n.width = e.resizing.width - u.deltaX / e.transformScale : n.width = e.resizing.width + u.deltaX / e.transformScale, n.height = e.resizing.height + u.deltaY / e.transformScale, e.resizing = n;
          break;
        }
        case "resizeend": {
          a$1 = B$1(h, v$1, p, y), n.width = a$1.width, n.height = a$1.height, e.resizing = { width: -1, height: -1 }, e.isResizing = false;
          break;
        }
      }
      a$1 = Ne(n.height, n.width), a$1.w < i$1.minW && (a$1.w = i$1.minW), a$1.w > i$1.maxW && (a$1.w = i$1.maxW), a$1.h < i$1.minH && (a$1.h = i$1.minH), a$1.h > i$1.maxH && (a$1.h = i$1.maxH), a$1.h < 1 && (a$1.h = 1), a$1.w < 1 && (a$1.w = 1), k = o, E = c, (p !== a$1.w || y !== a$1.h) && M("resize", i$1.i, a$1.h, a$1.w, n.height, n.width), t.type === "resizeend" && (j !== p || K$1 !== y) && M("resized", i$1.i, a$1.h, a$1.w, n.height, n.width), g.emit("resizeEvent", t.type, i$1.i, h, v$1, a$1.h, a$1.w);
    }
    function ge(t) {
      if (i$1.static || e.isResizing) return;
      const r2 = t.type;
      if (r2 === "dragstart" && e.isDragging || r2 !== "dragstart" && !e.isDragging)
        return;
      const s = a(t);
      if (ie(s)) return;
      const { x: o, y: c } = s, n = t.target;
      if (!n.offsetParent) return;
      const a$1 = { top: 0, left: 0 };
      switch (r2) {
        case "dragstart": {
          V$1 = h, q = v$1;
          const w = n.offsetParent.getBoundingClientRect(), R2 = n.getBoundingClientRect(), C = R2.left / e.transformScale, D = w.left / e.transformScale, P = R2.right / e.transformScale, Y = w.right / e.transformScale, L = R2.top / e.transformScale, O2 = w.top / e.transformScale;
          m.value ? a$1.left = (P - Y) * -1 : a$1.left = C - D, a$1.top = L - O2, e.dragging = a$1, e.isDragging = true;
          break;
        }
        case "dragmove": {
          const w = i($, G$1, o, c);
          if (m.value ? a$1.left = e.dragging.left - w.deltaX / e.transformScale : a$1.left = e.dragging.left + w.deltaX / e.transformScale, a$1.top = e.dragging.top + w.deltaY / e.transformScale, e.bounded) {
            const R2 = n.offsetParent.clientHeight - ce(i$1.h, e.rowHeight, e.margin[1]);
            a$1.top = fe(a$1.top, 0, R2);
            const C = I(), D = e.containerWidth - ce(i$1.w, C, e.margin[0]);
            a$1.left = fe(a$1.left, 0, D);
          }
          e.dragging = a$1;
          break;
        }
        case "dragend": {
          const w = n.offsetParent.getBoundingClientRect(), R2 = n.getBoundingClientRect(), C = R2.left / e.transformScale, D = w.left / e.transformScale, P = R2.right / e.transformScale, Y = w.right / e.transformScale, L = R2.top / e.transformScale, O2 = w.top / e.transformScale;
          m.value ? a$1.left = (P - Y) * -1 : a$1.left = C - D, a$1.top = L - O2, e.dragging = { top: -1, left: -1 }, e.isDragging = false;
          break;
        }
      }
      let u;
      m.value, u = A(a$1.top, a$1.left), $ = o, G$1 = c, (h !== u.x || v$1 !== u.y) && M("move", i$1.i, u.x, u.y), t.type === "dragend" && (V$1 !== h || q !== v$1) && M("moved", i$1.i, u.x, u.y), g.emit("dragEvent", t.type, i$1.i, u.x, u.y, y, p);
    }
    function B$1(t, r2, s, o) {
      const c = I();
      let n;
      return m.value ? n = {
        right: Math.round(c * t + (t + 1) * e.margin[0]),
        top: Math.round(e.rowHeight * r2 + (r2 + 1) * e.margin[1]),
        // 0 * Infinity === NaN, which causes problems with resize constraints;
        // Fix this if it occurs.
        // Note we do it here rather than later because Math.round(Infinity) causes depot
        width: s === 1 / 0 ? s : Math.round(c * s + Math.max(0, s - 1) * e.margin[0]),
        height: o === 1 / 0 ? o : Math.round(e.rowHeight * o + Math.max(0, o - 1) * e.margin[1])
      } : n = {
        left: Math.round(c * t + (t + 1) * e.margin[0]),
        top: Math.round(e.rowHeight * r2 + (r2 + 1) * e.margin[1]),
        // 0 * Infinity === NaN, which causes problems with resize constraints;
        // Fix this if it occurs.
        // Note we do it here rather than later because Math.round(Infinity) causes depot
        width: s === 1 / 0 ? s : Math.round(c * s + Math.max(0, s - 1) * e.margin[0]),
        height: o === 1 / 0 ? o : Math.round(e.rowHeight * o + Math.max(0, o - 1) * e.margin[1])
      }, n;
    }
    function A(t, r2) {
      const s = I();
      let o = Math.round((r2 - e.margin[0]) / (s + e.margin[0])), c = Math.round((t - e.margin[1]) / (e.rowHeight + e.margin[1]));
      return o = Math.max(Math.min(o, e.cols - p), 0), c = Math.max(Math.min(c, e.maxRows - y), 0), { x: o, y: c };
    }
    function I() {
      return (e.containerWidth - e.margin[0] * (e.cols + 1)) / e.cols;
    }
    function ce(t, r2, s) {
      return Number.isFinite(t) ? Math.round(r2 * t + Math.max(0, t - 1) * s) : t;
    }
    function fe(t, r2, s) {
      return Math.max(Math.min(t, s), r2);
    }
    function Ne(t, r2, s = false) {
      const o = I();
      let c = Math.round((r2 + e.margin[0]) / (o + e.margin[0])), n = 0;
      return s ? n = Math.ceil((t + e.margin[1]) / (e.rowHeight + e.margin[1])) : n = Math.round((t + e.margin[1]) / (e.rowHeight + e.margin[1])), c = Math.max(Math.min(c, e.cols - h), 0), n = Math.max(Math.min(n, e.maxRows - v$1), 0), { w: c, h: n };
    }
    function Te(t, r2) {
      e.containerWidth = t;
    }
    function de() {
      H();
    }
    function me() {
      !d.value && W.value && (d.value = He(W.value), e.useStyleCursor || d.value.styleCursor(false));
    }
    const Ie = eo(ge);
    function ue() {
      if (me(), !!d.value)
        if (e.draggable && !i$1.static) {
          const t = {
            ignoreFrom: i$1.dragIgnoreFrom,
            allowFrom: i$1.dragAllowFrom,
            ...i$1.dragOption
          };
          d.value.draggable(t), X || (X = true, d.value.on("dragstart dragmove dragend", (r2) => {
            r2.type === "dragmove" ? Ie(r2) : ge(r2);
          }));
        } else
          d.value.draggable({ enabled: false });
    }
    const ke = eo(le);
    function S() {
      if (me(), !!d.value)
        if (e.resizable && !i$1.static) {
          const t = B$1(0, 0, i$1.maxW, i$1.maxH), r2 = B$1(0, 0, i$1.minW, i$1.minH), s = {
            edges: {
              left: m.value ? `.${T$1.value[0]}` : false,
              right: m.value ? false : `.${T$1.value[0]}`,
              bottom: `.${T$1.value[0]}`,
              top: false
            },
            ignoreFrom: i$1.resizeIgnoreFrom,
            restrictSize: {
              min: {
                height: r2.height * e.transformScale,
                width: r2.width * e.transformScale
              },
              max: {
                height: t.height * e.transformScale,
                width: t.width * e.transformScale
              }
            },
            ...i$1.resizeOption
          };
          i$1.preserveAspectRatio && (s.modifiers = [He.modifiers.aspectRatio({ ratio: "preserve" })]), d.value.resizable(s), _ || (_ = true, d.value.on("resizestart resizemove resizeend", (o) => {
            o.type === "resizemove" ? ke(o) : le(o);
          }));
        } else
          d.value.resizable({ enabled: false });
    }
    return (t, r2) => (openBlock(), createElementBlock("section", {
      ref_key: "wrapper",
      ref: W,
      class: normalizeClass(De.value),
      style: normalizeStyle(e.style)
    }, [
      renderSlot(t.$slots, "default"),
      se.value ? (openBlock(), createElementBlock("span", {
        key: 0,
        class: normalizeClass(T$1.value)
      }, null, 2)) : createCommentVNode("", true)
    ], 6));
  }
});
export {
  st as default
};
