import { jsx as L, Fragment as Me } from "@emotion/react/jsx-runtime";
import Oe, { useRef as K, useEffect as _e, useState as ve, useCallback as d, useMemo as Fe } from "react";
import { DraggableCore as Pe } from "react-draggable";
import { getH as Q, setTransform as Ne, setTopLeft as Ge, perc as ge } from "../../utils.js";
import { calcXY as V, calcGridItemWHPx as le, calcGridColWidth as Ue, calcWH as Be, clamp as v, calcGridItemPosition as F } from "../../calculateUtils.js";
import ke from "clsx";
import { deepEqual as Xe } from "fast-equals";
import { DEFAULT_COLS as Ye, DEFAULT_ROW_HEIGHT as $e, DEFAULT_CONTAINER_WIDTH as je, DEFAULT_CONTAINER_HEIGHT as qe, DEFAULT_MARGIN as Je, DEFAULT_CONTAINER_PADDING as Ke, DEFAULT_TRANSFORM_SCALE as Qe, DEFAULT_COLAPSED_HEIGHT as Ve } from "../../constants.js";
import { gridLayoutClasses as a } from "../../classes/index.js";
import { Resizable as Ze } from "../../../extended/React-Resizable/Resizable/Resizable.js";
function et(z) {
  const {
    layoutItemRender: P,
    type: N,
    i: f,
    x: w,
    y: W,
    w: A,
    h: M,
    cols: S = Ye,
    rowHeight: x = $e,
    containerWidth: R = je,
    containerHeight: O = qe,
    margin: G = Je,
    containerPadding: U = Ke,
    transformScale: h = Qe,
    colapsedHeight: T = Ve,
    isBounded: de,
    maxRows: B = 1 / 0,
    className: me = "",
    draggableCancel: k = "",
    draggableHandle: Z = "",
    minH: D = 1,
    minW: y = 1,
    maxH: C = 1 / 0,
    maxW: b = 1 / 0,
    isResizable: X = !0,
    isDraggable: Y = !0,
    resizeHandles: ee,
    resizeHandle: te,
    useCSSTransforms: ne = !0,
    usePercentages: ue,
    style: fe,
    freeMove: he,
    maximize: m = "none",
    colapsed: g,
    visible: pe = !0,
    onDragStart: re,
    onDrag: ie,
    onDragStop: oe,
    onFreeMoveClick: ce
  } = z, e = K({
    cols: S,
    x: w,
    y: W,
    w: A,
    h: Q(M, T, x, g),
    minW: y,
    maxW: b,
    minH: D,
    maxH: C,
    containerWidth: R,
    containerHeight: O,
    margin: G,
    containerPadding: U,
    rowHeight: x,
    maxRows: B,
    colapsed: g
  });
  _e(() => {
    e.current = {
      cols: S,
      x: w,
      y: W,
      w: A,
      h: Q(M, T, x, g),
      minW: y,
      maxW: b,
      minH: D,
      maxH: C,
      containerWidth: R,
      containerHeight: O,
      margin: G,
      containerPadding: U,
      rowHeight: x,
      maxRows: B,
      colapsed: g
    };
  }, [
    S,
    w,
    W,
    A,
    M,
    y,
    b,
    D,
    C,
    R,
    O,
    G,
    U,
    x,
    B,
    g,
    T
  ]);
  const [$, _] = ve({
    resizing: void 0,
    dragging: void 0
  }), u = K({
    resizing: void 0,
    dragging: void 0
  }), ae = K(null), H = d(
    (n, t) => ({
      cols: e.current.cols,
      containerPadding: e.current.containerPadding,
      containerWidth: n || e.current.containerWidth,
      containerHeight: t || e.current.containerHeight,
      containerMargin: e.current.margin,
      maxRows: e.current.maxRows,
      rowHeight: e.current.rowHeight
    }),
    []
  ), Re = (n) => {
    let t;
    return ne ? t = Ne(n) : (t = Ge(n), ue && (t.left = ge(n.left / R), t.width = ge(n.width / R))), t;
  }, we = d((n, { node: t }) => {
    if (!re)
      return;
    const r = { top: 0, left: 0 }, { offsetParent: c } = t;
    if (!c)
      return;
    const o = c.getBoundingClientRect(), i = t.getBoundingClientRect(), s = i.left / h, l = o.left / h, E = i.top / h, I = o.top / h;
    r.left = s - l + c.scrollLeft, r.top = E - I + c.scrollTop, u.current.dragging = r, _((J) => ({ ...J, dragging: r }));
    const { x: p, y: q } = V(
      H(),
      r.top,
      r.left,
      e.current.w,
      e.current.h
    );
    re(f, p, q, {
      e: n,
      node: t,
      newPosition: r
    });
  }, []), xe = d(
    (n, { node: t, deltaX: r, deltaY: c }) => {
      if (!ie || !u.current.dragging)
        return;
      let o = u.current.dragging.top + c, i = u.current.dragging.left + r;
      const s = H();
      if (de) {
        const { offsetParent: p } = t;
        if (p) {
          const q = p.clientHeight - le(
            e.current.h,
            e.current.rowHeight,
            e.current.margin[1]
          );
          o = v(o, 0, q);
          const J = Ue(s), Ae = R - le(e.current.w, J, e.current.margin[0]);
          i = v(i, 0, Ae);
        }
      }
      const l = { top: o, left: i };
      u.current.dragging = l, _((p) => ({ ...p, dragging: l }));
      const { x: E, y: I } = V(
        s,
        o,
        i,
        e.current.w,
        e.current.h
      );
      ie(f, E, I, {
        e: n,
        node: t,
        newPosition: l
      });
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  ), He = d((n, { node: t }) => {
    if (!oe || !u.current.dragging)
      return;
    const { left: r, top: c } = u.current.dragging, o = { top: c, left: r };
    u.current.dragging = void 0, _((l) => ({ ...l, dragging: void 0 }));
    const { x: i, y: s } = V(
      H(),
      c,
      r,
      e.current.w,
      e.current.h
    );
    return oe(f, i, s, {
      e: n,
      node: t,
      newPosition: o
    });
  }, []), j = d(
    (n, { node: t, size: r }, c) => {
      const o = z[c];
      if (!o || e.current.colapsed)
        return;
      let { w: i, h: s } = Be(
        H(),
        r.width,
        r.height,
        e.current.x,
        e.current.y
      );
      const l = Math.max(e.current.minW, 1), E = Math.min(e.current.maxW, e.current.cols - e.current.x);
      i = v(i, l, E), s = v(s, e.current.minH, e.current.maxH);
      const I = c === "onResizeStop" ? void 0 : r;
      _((p) => ({
        ...p,
        resizing: I
      })), u.current.resizing = I, o(f, i, s, { e: n, node: t, size: r });
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  ), Ie = d((n, t) => {
    j(n, t, "onResizeStop");
  }, []), ze = d((n, t) => {
    j(n, t, "onResizeStart");
  }, []), Se = d(() => {
    ce && ce(f);
  }, []), Te = d(
    (n, t, r) => {
      const c = F(r, 0, 0, S - w, 0, m).width, o = F(r, 0, 0, y, D, m), i = F(r, 0, 0, b, C, m), s = [o.width, o.height], l = [
        Math.min(i.width, c),
        Math.min(i.height, 1 / 0)
      ];
      return /* @__PURE__ */ L(
        Ze,
        {
          draggableOpts: {
            disabled: !X || m !== "none" || g
          },
          className: X ? void 0 : "react-resizable-hide",
          width: t.width,
          height: t.height,
          minConstraints: s,
          maxConstraints: l,
          onResizeStop: Ie,
          onResizeStart: ze,
          onResize: ye,
          transformScale: h,
          resizeHandles: ee,
          handle: te,
          children: n
        }
      );
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [
      S,
      w,
      y,
      D,
      b,
      C,
      X,
      h,
      ee,
      te,
      m,
      g
    ]
  ), De = d(
    (n) => /* @__PURE__ */ L(
      Pe,
      {
        disabled: !Y || m !== "none",
        onStart: we,
        onDrag: xe,
        onStop: He,
        handle: Z,
        cancel: ".react-resizable-handle" + (k ? "," + k : ""),
        scale: h,
        nodeRef: ae,
        children: n
      }
    ),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [Y, Z, h, k, m]
  ), ye = d((n, t) => {
    j(n, t, "onResize");
  }, []), Ce = H(R, O), se = F(
    Ce,
    w,
    W,
    A,
    Q(M, T, x, g),
    m,
    $
  ), be = ke(a.gridItemRoot, me, {
    [`${a.gridItemType}-${N}`]: !0,
    [a.static]: z.static,
    [a.resizing]: !!$.resizing,
    [a.dragging]: !!$.dragging,
    [a.maximizeMe]: m === "maximize_me",
    [a.maximizeOther]: m === "maximize_other",
    [a.colapsed]: g,
    [`${a.colapsed}-${T}`]: g,
    [a.gridItemFreeMove]: he,
    [a.resizeHide]: g,
    [a.invisible]: !pe,
    [a.cssTransforms]: ne,
    "react-draggable": Y
    //Requerido para el componente Draggable
    // dropping: Boolean(droppingPosition),
  }), Ee = {
    ...fe,
    ...Re(se)
    //TODO: Delegar el estilo en el ItemRender
  }, Le = Fe(() => /* @__PURE__ */ L(P, { type: N, i: f }), [N, f]), We = De(Te(/* @__PURE__ */ L(
    "div",
    {
      "data-grid-item-id": f,
      className: be,
      ref: ae,
      style: Ee,
      role: "none",
      onClick: Se,
      children: Le
    }
  ), se, H()));
  return /* @__PURE__ */ L(Me, { children: We });
}
const mt = Oe.memo(et, (z, P) => Xe(z, P));
export {
  et as GridItem,
  mt as MemonizedGridItem
};
