function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from "react";
import Box from "../../atoms/box/box";
import { ZStack } from "../../atoms/stack/stack";
import Avatar from "./avatar";
import { avatarGroupContext } from "./useAvatarGroup";
/**
 * AvatarGroup is a component that groups multiple Avatar components together. It can truncate the avatars and show a "+X" label (where X is the remaining avatars).
 */
const AvatarGroup = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
  children,
  spacing = "2",
  max = 3,
  ...rest
}, ref) => {
  // Convert the children to an array
  const avatarChildren = React.Children.toArray(children);

  /**
   * Render the avatars.
   * @returns An array of Avatar components.
   */
  const renderAvatars = () => {
    return React.Children.map(avatarChildren, (child, index) => {
      const shouldBreakLoop = index > max;
      const shouldRenderAvatar = index + 1 <= max;
      if (shouldBreakLoop) return;
      if (shouldRenderAvatar) return /*#__PURE__*/React.cloneElement(child);else {
        if (rest.customTruncatedComponent) return /*#__PURE__*/React.cloneElement(rest.customTruncatedComponent, {
          ...rest.customTruncatedComponent.props,
          remainingAvatars: avatarChildren.length - max
        });
        return /*#__PURE__*/React.createElement(Avatar, {
          name: `+${avatarChildren.length - max}`,
          getInitials: name => name,
          backgroundColor: rest.truncatedBackgroundColor
        });
      }
    });
  };
  return /*#__PURE__*/React.createElement(Box, _extends({}, rest, {
    ref: ref
  }), /*#__PURE__*/React.createElement(avatarGroupContext.Provider, {
    value: {
      size: rest.size,
      variant: rest.variant
    }
  }, /*#__PURE__*/React.createElement(ZStack, {
    reversed: true,
    spacing: spacing
  }, renderAvatars())));
}));
AvatarGroup.displayName = "AvatarGroup";
export default AvatarGroup;
//# sourceMappingURL=avatar-group.js.map