"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.AvatarGroup = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Avatar = require("../Avatar");

var _jsxRuntime = require("react/jsx-runtime");

// Generated with util/create-component.js
const AvatarGroup = props => {
  const {
    max = 10,
    xs = "medium",
    shape = null,
    sm = null,
    md = null,
    lg = null,
    xl = null,
    children,
    backgroundColor = null,
    className,
    ...otherProps
  } = props;

  const childrenWithProps = _react.default.Children.map(children, (child, index) => {
    // Checking isValidElement is the safe way and avoids a typescript
    // error too.
    if ( /*#__PURE__*/_react.default.isValidElement(child)) {
      if (index + 1 === max) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
          alt: "+" + (_react.default.Children.count(children) - max).toString(),
          xs: xs,
          sm: sm,
          md: md,
          lg: lg,
          xl: xl,
          bordered: true,
          backgroundColor: backgroundColor
        });
      } else if (index < max) {
        return /*#__PURE__*/_react.default.cloneElement(child, {
          groupXS: xs,
          groupSM: sm,
          groupMD: md,
          groupLG: lg,
          groupXL: xl,
          groupShape: shape,
          bordered: true,
          groupBackgroundColor: backgroundColor
        });
      }
    }
  });

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    "data-testid": "Wps-AvatarGroup",
    ...otherProps,
    className: "jsx-1510576301" + " " + (otherProps && otherProps.className != null && otherProps.className || (0, _classnames.default)("Wps-AvatarGroup", className) || ""),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "1510576301",
      children: ".Wps-AvatarGroup.jsx-1510576301{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-min-content;width:-moz-min-content;width:min-content;}.Wps-AvatarGroup.jsx-1510576301 div,.Wps-AvatarGroup.jsx-1510576301 a{margin-left:-8%;}.Wps-AvatarGroup.jsx-1510576301 div:first-child,.Wps-AvatarGroup.jsx-1510576301 a:first-child{margin-left:0;}"
    }), childrenWithProps]
  });
};

exports.AvatarGroup = AvatarGroup;