"use strict";
var import_ResponsiveGroup = require("../ResponsiveGroup.css");
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const kit_internal_useResize = require("./internal/useResize.cjs");
require("./Theme/UI.cjs");
const kit_Theme_themeUtils = require("./Theme/themeUtils.cjs");
const kit_Theme_themes = require("./Theme/themes.cjs");
const base = "ResponsiveGroup_base_1933e";
const responsiveChild = "ResponsiveGroup_responsiveChild_1933e";
const css = {
  base,
  responsiveChild
};
const gapMap = {
  [kit_Theme_themes.ShirtSize.Small]: kit_Theme_themeUtils.Spacing.Xs,
  [kit_Theme_themes.ShirtSize.Medium]: kit_Theme_themeUtils.Spacing.Md,
  [kit_Theme_themes.ShirtSize.Large]: kit_Theme_themeUtils.Spacing.Xl
};
function getPotentialWidth(el) {
  if (!el)
    return 0;
  el.style.display = "initial";
  const width = el.clientWidth;
  el.style.display = "";
  return width;
}
const ResponsiveGroup = ({
  children,
  gap = kit_Theme_themes.ShirtSize.Medium,
  maxVisible = 3,
  onChange
}) => {
  const [numVisible, setNumVisible] = React.useState(0);
  const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
  const refs = React.useRef(new Array(childrenArray.length));
  const { size, refCallback } = kit_internal_useResize();
  React.useLayoutEffect(() => {
    const { visible } = refs.current.reduce(
      (obj, el, i, arr) => {
        const newObj = structuredClone(obj);
        newObj.accumulatedWidth += getPotentialWidth(el);
        if (newObj.accumulatedWidth > size.width) {
          if (el)
            el.style.display = "none";
        } else {
          if (el) {
            el.style.display = "initial";
            newObj.visible++;
          }
        }
        if (i !== arr.length - 1)
          newObj.accumulatedWidth += gapMap[gap];
        return newObj;
      },
      { accumulatedWidth: 0, visible: 0 }
    );
    setNumVisible(visible);
  }, [childrenArray, gap, maxVisible, onChange, size.width]);
  React.useEffect(() => {
    onChange == null ? void 0 : onChange(numVisible);
  }, [onChange, numVisible]);
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.base, ref: refCallback, style: { gap: gapMap[gap] }, children: childrenArray.slice(0, maxVisible).map((child, idx) => /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: css.responsiveChild,
      ref: (el) => {
        refs.current[idx] = el;
      },
      children: child
    },
    idx
  )) });
};
module.exports = ResponsiveGroup;
