"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _AvatarGroupSt = require("./AvatarGroup.st.css.js");
var _Avatar = _interopRequireDefault(require("../Avatar"));
var _Text = _interopRequireDefault(require("../Text"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AvatarGroup/AvatarGroup.jsx",
  _this = void 0;
var avatarSizeMap = {
  medium: 'size30',
  small: 'size24',
  tiny: 'size18'
};
var tinySizeMaxIndicatorCount = 9;
var getRandomColorPattern = function getRandomColorPattern() {
  var patternColor = ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6'];
  var firstIndex = Math.floor(Math.random() * 6); // get random number between 0 to 5
  var lastIndex = firstIndex + 6;
  return patternColor.slice(firstIndex, lastIndex);
};
var myPatternColors = getRandomColorPattern();
var getAvatarColor = function getAvatarColor(_ref) {
  var index = _ref.index,
    color = _ref.color;
  var colorIndex = index;
  if (color) {
    return color;
  }
  while (colorIndex > 5) {
    colorIndex = colorIndex - 6;
  }
  return myPatternColors[colorIndex];
};
var setAvatarCompPropsArr = function setAvatarCompPropsArr(items, avatarSize, itemsMaxLength) {
  // gets the items prop from avatarGroup component and set it with the proper prop for avatar component such as size, shape etc.
  var avatarItems = items.map(function (item, index) {
    var ariaLabel = item.ariaLabel,
      color = item.color,
      imgProps = item.imgProps,
      name = item.name,
      text = item.text,
      placeholder = item.placeholder,
      title = item.title;
    var size = avatarSizeMap[avatarSize];
    var shape = 'circle';
    var avatarColor = getAvatarColor({
      index: index,
      color: color
    });
    return {
      size: size,
      shape: shape,
      ariaLabel: ariaLabel,
      color: avatarColor,
      imgProps: imgProps,
      name: name,
      text: text,
      placeholder: placeholder,
      title: title
    };
  });
  var avatars = avatarItemsLengthHandler(avatarItems, avatarItems.length, itemsMaxLength, avatarSize);
  return avatars;
};
var avatarItemsLengthHandler = function avatarItemsLengthHandler(items, itemsLength, maxItems, avatarSize) {
  var remainingAvatarsCount = itemsLength - maxItems + 1;
  var moreItemAvatar = {
    text: "".concat(avatarSize === 'tiny' && remainingAvatarsCount > tinySizeMaxIndicatorCount ? tinySizeMaxIndicatorCount : remainingAvatarsCount, "+"),
    size: avatarSizeMap[avatarSize],
    isMoreItem: true
  };
  if (itemsLength > maxItems && maxItems >= 2) {
    items.length = maxItems;
    items[maxItems - 1] = moreItemAvatar;
  }
  return items;
};
var MoreIndicator = function MoreIndicator(_ref2) {
  var text = _ref2.text,
    size = _ref2.size;
  return /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _constants.dataHooks.avatarGroupMoreItem,
    className: (0, _AvatarGroupSt.st)(_AvatarGroupSt.classes.moreIndicatorCircle, {
      size: size
    }),
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 93,
      columnNumber: 3
    }
  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    secondary: true,
    weight: "normal",
    className: _AvatarGroupSt.classes.moreIndicatorText,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 97,
      columnNumber: 5
    }
  }, text));
};

/** AvatarGroup */
var AvatarGroup = function AvatarGroup(_ref3) {
  var dataHook = _ref3.dataHook,
    className = _ref3.className,
    _ref3$type = _ref3.type,
    type = _ref3$type === void 0 ? 'stretched' : _ref3$type,
    _ref3$items = _ref3.items,
    items = _ref3$items === void 0 ? [] : _ref3$items,
    _ref3$maxItems = _ref3.maxItems,
    maxItems = _ref3$maxItems === void 0 ? 5 : _ref3$maxItems,
    _ref3$size = _ref3.size,
    size = _ref3$size === void 0 ? 'medium' : _ref3$size,
    _ref3$showDivider = _ref3.showDivider,
    showDivider = _ref3$showDivider === void 0 ? false : _ref3$showDivider;
  var itemsMaxLength = maxItems < 2 ? 2 : maxItems;
  var avatarCompArr = setAvatarCompPropsArr(items, size, itemsMaxLength);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _AvatarGroupSt.st)(_AvatarGroupSt.classes.root, {
      size: size,
      type: type
    }, className),
    "data-hook": dataHook,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 117,
      columnNumber: 5
    }
  }, avatarCompArr.map(function (item, index) {
    var key = "".concat(Object.values(item));
    if (item.isMoreItem) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: key,
        className: _AvatarGroupSt.classes.avatarContainer,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 125,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react["default"].createElement(MoreIndicator, {
        text: item.text,
        size: size,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 126,
          columnNumber: 15
        }
      }));
    }
    var shouldIncludeDivider = index === 0 && showDivider && avatarCompArr.length > 1;
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
      key: key,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 135,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: _AvatarGroupSt.classes.avatarContainer,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 136,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], (0, _extends2["default"])({}, item, {
      dataHook: _constants.dataHooks.avatarGroupItem,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 137,
        columnNumber: 15
      }
    }))), shouldIncludeDivider && /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
      direction: "vertical",
      className: (0, _AvatarGroupSt.st)(_AvatarGroupSt.classes.divider, {
        size: size,
        type: type
      }),
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 140,
        columnNumber: 15
      }
    }));
  }));
};
AvatarGroup.displayName = 'AvatarGroup';
var _default = exports["default"] = AvatarGroup;