import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import cx from 'classnames';
import uiUtilities from '@teamleader/ui-utilities';
import Box from '../box';
import { TextBodyCompact } from '../typography';
import Tooltip from '../tooltip';
import theme from './theme.css';
var TooltippedBox = Tooltip(Box);
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.Children.map(overflowChildren, function (child) {
    return /*#__PURE__*/React.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;
  var tooltipProps = enableTooltip ? {
    tooltip: /*#__PURE__*/React.createElement(TextBodyCompact, null, namesToDisplay.join(', '), hasNamesOverflow && ", +".concat(getNamesOverflowLabel ? getNamesOverflowLabel(namesOverflowAmount) : namesOverflowAmount, "...")),
    tooltipColor: 'white',
    tooltipPosition: 'top',
    tooltipSize: 'small'
  } : {};
  return /*#__PURE__*/React.createElement(Component, _extends({
    alignItems: "center",
    className: cx(uiUtilities['reset-font-smoothing'], theme['overflow']),
    display: "flex",
    justifyContent: "center",
    onClick: onOverflowClick
  }, tooltipProps), displayMax > 0 && "+", overflowAmount);
};

export default AvatarStackOverflow;