import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { borderSizeValues, DEFAULT_SIZE } from './constants.esm.js';
import Avatar from './Avatar.esm.js';

var groupBaseCss = function groupBaseCss(_theme) {
  return {
    display: "flex",
    alignItems: "center",
    // Create new stacking context
    zIndex: 0
  };
};

function AvatarsGroup(_ref) {
  var avatars = _ref.avatars,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? DEFAULT_SIZE : _ref$size,
      _ref$borderColor = _ref.borderColor,
      borderColor = _ref$borderColor === void 0 ? "#fff" : _ref$borderColor,
      _ref$omittedAvatarsCo = _ref.omittedAvatarsCount,
      omittedAvatarsCount = _ref$omittedAvatarsCo === void 0 ? 0 : _ref$omittedAvatarsCo,
      _ref$omittedAvatarsLa = _ref.omittedAvatarsLabel,
      omittedAvatarsLabel = _ref$omittedAvatarsLa === void 0 ? "".concat(omittedAvatarsCount, " more") : _ref$omittedAvatarsLa,
      className = _ref.className,
      style = _ref.style;
  var commonAvatarProps = {
    size: size,
    borderColor: borderColor
  };
  var overlapCss = {
    "&:not(:first-of-type)": {
      marginLeft: "-".concat(borderSizeValues[size] * 2, "px")
    }
  };
  return jsx("div", {
    css: groupBaseCss,
    className: className,
    style: style
  }, avatars.map(function (_ref2, idx, list) {
    var src = _ref2.src,
        label = _ref2.label,
        avatar = _objectWithoutProperties(_ref2, ["src", "label"]);

    return jsx(Avatar // Using both src and label as key because src might not be unique
    , _extends({
      key: "".concat(src, "_").concat(label, "_").concat(idx),
      src: src,
      label: label
    }, commonAvatarProps, avatar, {
      css: overlapCss,
      style: {
        zIndex: list.length - idx
      }
    }));
  }), omittedAvatarsCount > 0 && jsx(Avatar, _extends({
    src: "" // this is an avatar "lookalike" that indicates how many avatars were left out
    ,
    label: omittedAvatarsLabel,
    css: overlapCss
  }, commonAvatarProps, {
    fallback: "+".concat(omittedAvatarsCount)
  })));
}
AvatarsGroup.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "AvatarsGroup",
  "props": {
    "size": {
      "defaultValue": {
        "value": "DEFAULT_SIZE",
        "computed": true
      },
      "required": false,
      "tsType": {
        "name": "AvatarSize"
      },
      "description": ""
    },
    "borderColor": {
      "defaultValue": {
        "value": "\"#fff\"",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "omittedAvatarsCount": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "number"
      },
      "description": ""
    },
    "omittedAvatarsLabel": {
      "defaultValue": {
        "value": "`${omittedAvatarsCount} more`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "avatars": {
      "required": true,
      "tsType": {
        "name": "Array",
        "elements": [{
          "name": "Pick",
          "elements": [{
            "name": "AvatarProps"
          }, {
            "name": "union",
            "raw": "\"src\" | \"label\" | \"fallback\"",
            "elements": [{
              "name": "literal",
              "value": "\"src\""
            }, {
              "name": "literal",
              "value": "\"label\""
            }, {
              "name": "literal",
              "value": "\"fallback\""
            }]
          }],
          "raw": "Pick<AvatarProps, \"src\" | \"label\" | \"fallback\">"
        }],
        "raw": "AvatarDescriptor[]"
      },
      "description": ""
    },
    "className": {
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "style": {
      "required": false,
      "tsType": {
        "name": "ReactCSSProperties",
        "raw": "React.CSSProperties"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Avatar/AvatarsGroup.tsx"] = {
    name: "AvatarsGroup",
    docgenInfo: AvatarsGroup.__docgenInfo,
    path: "src/components/Avatar/AvatarsGroup.tsx"
  };
}

export default AvatarsGroup;
//# sourceMappingURL=AvatarsGroup.esm.js.map
