import { jsx as q } from "@emotion/react/jsx-runtime";
import { noop as F, isEqualLayouts as v, cloneLayout as S } from "../../utils.js";
import { getBreakpointFromWidth as x, getColsFromBreakpoint as j, getIndentationValue as y, findOrGenerateResponsiveLayout as K } from "./responsiveUtils.js";
import { forwardRef as z, useState as J, useRef as Q, useEffect as A, useCallback as X } from "react";
import { useFirstRender as I } from "@m4l/graphics";
import { GridLayout as Y } from "../../GridLayout.js";
import { DEFAULT_RESPONSIVE_BREAKPOINTS as Z, DEFAULT_RESPONSIVE_COLS as $, DEFAULT_CONTAINER_PADDING as tt, DEFAULT_MARGIN as et, DEFAULT_COLAPSED_HEIGHT as ot, DEFAULT_ROW_HEIGHT as nt } from "../../constants.js";
import { generateInitialState as rt, getHeight as T } from "./helper.js";
import { deepEqual as _ } from "fast-equals";
const dt = z((L, O) => {
  const {
    layoutItemRender: P,
    containerWidth: r,
    containerHeight: i,
    breakpoint: g,
    compactType: f = null,
    breakpoints: a = Z,
    cols: c = $,
    containerPadding: H = tt,
    containerMargin: D = et,
    layouts: s = {},
    // onBreakpointChange = noop,
    onLayoutChange: k = F,
    onContainerChange: b = F,
    colapsedHeight: N = ot,
    rowHeight: W = nt,
    ...G
  } = L, [t, m] = J(
    () => rt(L)
  ), e = Q({
    layouts: {
      ...s,
      [t.breakpoint]: t.breakpointLayout
    },
    cols: c,
    currentBreakpointCols: t.cols,
    currentBreakpoint: t.breakpoint,
    breakpoints: a,
    containerWidth: r,
    containerHeight: i,
    colapsedHeight: t.colapsedHeight,
    rowHeight: t.rowHeight
  }), M = I([
    r,
    i,
    s,
    g,
    a,
    c
  ]), U = I([t.breakpointLayout]);
  A(() => {
    U || k(t.breakpointLayout, e.current.layouts);
  }, [t.breakpointLayout]), A(() => {
    if (M) {
      b({
        containerWidth: e.current.containerWidth,
        containerHeight: e.current.containerHeight,
        breakpoint: t.breakpoint,
        cols: t.cols
      }), t.fireOnLoadLayoutChange && k(t.breakpointLayout, {
        ...s,
        [t.breakpoint]: t.breakpointLayout
      });
      return;
    }
    const n = e.current.currentBreakpoint, l = e.current.containerWidth, d = e.current.containerHeight, C = e.current.currentBreakpointCols, o = g || x(a, r), u = j(o, c), p = { ...s };
    let E = t.contaierMargin, w = t.contaierPadding;
    if (o !== n || u !== C || !_(c, e.current.cols) || !_(a, e.current.breakpoints) || !v(s, e.current.layouts)) {
      E = y(D, o), w = y(H, o);
      const h = T(N, o), R = T(W, o);
      n in p || (console.error("useEffect casi imposible", n, p), p[n] = S(t.breakpointLayout));
      const B = K(
        p,
        a,
        o,
        n,
        u,
        f,
        c,
        h,
        R
      );
      p[o] = B, e.current.layouts = p, e.current.breakpoints = a, e.current.currentBreakpoint = o, e.current.currentBreakpointCols = u, e.current.colapsedHeight = h, m({
        breakpoint: o,
        breakpointLayout: B,
        cols: u,
        contaierMargin: E,
        contaierPadding: w,
        colapsedHeight: h,
        rowHeight: R
      });
    }
    (o !== n || u !== C || l !== r || d !== i) && b({
      containerWidth: r,
      containerHeight: i,
      // containerMargin: newContainerMargin,
      // containerPadding: newContainerPadding,
      breakpoint: o,
      cols: u
    });
  }, [r, i, s, g, a, c]);
  const V = X(
    (n) => {
      const l = S(n);
      e.current.layouts[e.current.currentBreakpoint] = l, m((d) => ({ ...d, breakpointLayout: l }));
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [k]
  );
  return /* @__PURE__ */ q(
    Y,
    {
      ref: O,
      rowHeight: t.rowHeight,
      containerWidth: r,
      containerHeight: i,
      colapsedHeight: t.colapsedHeight,
      layoutItemRender: P,
      margin: t.contaierMargin,
      containerPadding: y(H, t.breakpoint),
      onLayoutChange: V,
      layout: t.breakpointLayout,
      cols: t.cols,
      compactType: f,
      ...G
    }
  );
});
export {
  dt as Responsive
};
