import { jsx as E } from "@emotion/react/jsx-runtime";
import R, { forwardRef as T, useRef as N, useState as S, useMemo as _, useCallback as g, useEffect as M } from "react";
import z from "clsx";
import H from "lodash-es/throttle";
import { useResizeObserver as O } from "@m4l/graphics";
import { DEFAULT_CONTAINER_HEIGHT as W, DEFAULT_CONTAINER_WIDTH as w, THROTTLE_RESIZE_TIMEOUT as A, COMPONENT_CLASS_NAME as C } from "../../constants.js";
function U(s) {
  return T((t, c) => {
    const { measureBeforeMount: f = !0, ...m } = t, u = N(!1), [r, i] = S({
      mounted: !1,
      width: w,
      height: W
    }), n = _(
      () => () => {
        const e = o.current;
        e instanceof HTMLElement && e.clientWidth && i((h) => ({
          ...h,
          width: e.clientWidth,
          //
          height: e.offsetHeight
        }));
      },
      // eslint-disable-next-line react-hooks/exhaustive-deps
      []
    ), a = H(n, A, {
      leading: !1,
      // No enviar el primer evento de resizing
      trailing: !0
      // Incluir siempre el ultimo evento en la cola, para que no quede se quedee a la mitad de resizing
    }), l = g((e) => {
      a();
    }, []), o = O(l);
    if (M(() => {
      i((e) => ({ ...e, mounted: !0 })), u.current = !0, n();
    }, []), f && !r.mounted)
      return /* @__PURE__ */ E(
        "div",
        {
          className: z(t.className, C),
          style: t.style,
          ref: o
        }
      );
    const d = {
      ...m,
      innerRef: o,
      containerWidth: r.width,
      containerHeight: r.height,
      ref: c
    };
    return R.createElement(s, d);
  });
}
export {
  U as withSizeProvider
};
