"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

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

var _uiUtilities = _interopRequireDefault(require("@teamleader/ui-utilities"));

var _box = _interopRequireDefault(require("../box"));

var _typography = require("../typography");

var _tooltip = _interopRequireDefault(require("../tooltip"));

var _theme = _interopRequireDefault(require("./theme.css"));

var TooltippedBox = (0, _tooltip.default)(_box.default);
var MAX_NAMES_TO_SHOW_IN_TOOLTIP = 15;

var AvatarStackOverflow = function AvatarStackOverflow(_ref) {
  var displayMax = _ref.displayMax,
      overflowAmount = _ref.overflowAmount,
      overflowChildren = _ref.overflowChildren,
      onOverflowClick = _ref.onOverflowClick,
      tooltip = _ref.tooltip,
      getNamesOverflowLabel = _ref.getNamesOverflowLabel;

  var names = _react.default.Children.map(overflowChildren, function (child) {
    return /*#__PURE__*/_react.default.isValidElement(child) && child.props.fullName;
  }).filter(Boolean);

  var enableTooltip = tooltip && names.length > 0;
  var namesToDisplay = names.slice(0, MAX_NAMES_TO_SHOW_IN_TOOLTIP);
  var namesOverflowAmount = names.length - MAX_NAMES_TO_SHOW_IN_TOOLTIP;
  var hasNamesOverflow = namesOverflowAmount > 0;
  var Component = enableTooltip ? TooltippedBox : _box.default;
  var tooltipProps = enableTooltip ? {
    tooltip: /*#__PURE__*/_react.default.createElement(_typography.TextBodyCompact, null, namesToDisplay.join(', '), hasNamesOverflow && ", +".concat(getNamesOverflowLabel ? getNamesOverflowLabel(namesOverflowAmount) : namesOverflowAmount, "...")),
    tooltipColor: 'white',
    tooltipPosition: 'top',
    tooltipSize: 'small'
  } : {};
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
    alignItems: "center",
    className: (0, _classnames.default)(_uiUtilities.default['reset-font-smoothing'], _theme.default['overflow']),
    display: "flex",
    justifyContent: "center",
    onClick: onOverflowClick
  }, tooltipProps), displayMax > 0 && "+", overflowAmount);
};

var _default = AvatarStackOverflow;
exports.default = _default;