import React__default, { forwardRef, useContext } from "react";
import { isNumber } from "../_util/is.js";
import cs from "../_util/classNames.js";
import { ConfigContext } from "../ConfigProvider/index.js";
import Avatar from "./avatar.js";
import Popover from "../Popover/index.js";
import AvatarContext from "./context.js";
import useMergeProps from "../_util/hooks/useMergeProps.js";
import { jsx, jsxs } from "../../../../../../@emotion_react@11.10.4_3toe27fv7etiytxb5kxc7fxaw4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
var __assign = globalThis && globalThis.__assign || function() {
  __assign = Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s)
        if (Object.prototype.hasOwnProperty.call(s, p))
          t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __rest = globalThis && globalThis.__rest || function(s, e) {
  var t = {};
  for (var p in s)
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
      t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function")
    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
        t[p[i]] = s[p[i]];
    }
  return t;
};
var defaultProps = {
  shape: "circle",
  autoFixFontSize: true
};
function Group(baseProps, ref) {
  var _a;
  var _b = useContext(ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig = _b.componentConfig, rtl = _b.rtl;
  var props = useMergeProps(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig["Avatar.Group"]);
  var className = props.className, style = props.style, children = props.children, size = props.size, shape = props.shape, autoFixFontSize = props.autoFixFontSize, zIndexAscend = props.zIndexAscend, maxCount = props.maxCount, maxStyle = props.maxStyle, maxPopoverTriggerProps = props.maxPopoverTriggerProps, rest = __rest(props, ["className", "style", "children", "size", "shape", "autoFixFontSize", "zIndexAscend", "maxCount", "maxStyle", "maxPopoverTriggerProps"]);
  var prefixCls = getPrefixCls("avatar-group");
  var classNames = cs(prefixCls, (_a = {}, _a[prefixCls + "-rtl"] = rtl, _a), className);
  var childrenArr = React__default.Children.toArray(children);
  var avatarCount = childrenArr.length;
  var avatarsToRender = childrenArr;
  if (isNumber(maxCount) && maxCount >= 0 && avatarCount > maxCount) {
    var avatarsInPopover = childrenArr.slice(maxCount);
    avatarsToRender = childrenArr.slice(0, maxCount);
    avatarsToRender.push(/* @__PURE__ */ jsx(Avatar, {
      style: maxStyle,
      className: prefixCls + "-max-count-avatar",
      children: /* @__PURE__ */ jsxs(Popover, {
        triggerProps: maxPopoverTriggerProps,
        content: /* @__PURE__ */ jsx(AvatarContext.Provider, {
          value: {
            size,
            shape,
            autoFixFontSize
          },
          children: /* @__PURE__ */ jsx("div", {
            className: prefixCls + "-popover",
            children: avatarsInPopover
          })
        }),
        children: ["+", avatarsInPopover.length]
      })
    }, "_arco_avatar_group_popup"));
  }
  return /* @__PURE__ */ jsx("div", {
    ...__assign({
      ref,
      style,
      className: classNames
    }, rest),
    children: avatarsToRender.map(function(item, index) {
      var isFirst = rtl ? index === avatarsToRender.length - 1 : index === 0;
      var stackedStyle = {
        zIndex: zIndexAscend ? index + 1 : avatarCount - index,
        marginLeft: size ? !isFirst ? -size / 4 : 0 : ""
      };
      return /* @__PURE__ */ jsx(AvatarContext.Provider, {
        value: {
          size,
          shape,
          autoFixFontSize,
          style: stackedStyle
        },
        children: item
      }, index);
    })
  });
}
var AvatarGroupComponent = forwardRef(Group);
AvatarGroupComponent.displayName = "AvatarGroup";
const Group$1 = AvatarGroupComponent;
export {
  Group$1 as default
};
//# sourceMappingURL=group.js.map
