import _extends from "@babel/runtime/helpers/esm/extends";
import _styled2 from "styled-components";
import _styled from "styled-components";
import React, { Children, cloneElement, useMemo, forwardRef } from "react";
import { AvatarGroupsStyles, LengthCountStyles } from "./Styles";
import { Tooltip } from "../Tooltip";
import { Typography } from "../Typography/Typography";
export const AvatarGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
  var _Children$toArray;
  let {
    limit,
    size = 34,
    children,
    hasTooltip = false,
    ...rest
  } = _ref;
  // always display counter with min +2 as +1 can takes space of an 1 more Avatar
  const minChildren = Children.count(children) - limit > 1 ? false : true;
  // gap between Avatars
  const gap = 8;
  const _children = minChildren ? Children.toArray(children) : Children.toArray(children).slice(0, limit);
  const handleVariant = useMemo(() => {
    if (size >= 34) return "Caption 1";
    return "Caption 2";
  }, [size]);

  // get all names indexed above limit number from alt tag on Avatar for counter tooltip
  const nameArr = (_Children$toArray = Children.toArray(children)) == null ? void 0 : _Children$toArray.slice(limit).map(item => {
    const {
      props
    } = item;
    return props.alt;
  });
  return /*#__PURE__*/React.createElement(AvatarGroupsStyles, _extends({
    hasTooltip: hasTooltip,
    ref: ref
  }, rest), _children.map((child, index) => {
    const item = child;
    const tooltipText = item.props.alt;
    const alt = "Image of " + tooltipText;
    return /*#__PURE__*/React.createElement(Tooltip, {
      title: tooltipText ? tooltipText : "",
      disable: !hasTooltip,
      key: alt
    }, /*#__PURE__*/cloneElement(item, {
      ...item.props,
      size: size,
      alt: alt,
      style: {
        // component preserves it's width
        marginLeft: "-" + (index === 0 ? null : gap) + "px",
        outline: "1px solid var(--page-paper-main)"
      }
    }));
  }), limit >= Children.count(children) || minChildren ? null : /*#__PURE__*/React.createElement(_StyledTooltip, {
    title: nameArr.join(",\n"),
    disable: !hasTooltip
  }, /*#__PURE__*/React.createElement(_StyledLengthCountStyles, {
    size: size,
    role: "status",
    "aria-label": "Rest of the users",
    $_css: "-" + gap + "px"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: handleVariant,
    weight: "medium"
  }, "+", Children.count(children) - limit))));
});
AvatarGroup.displayName = "AvatarGroup";
var _StyledTooltip = _styled(Tooltip).withConfig({
  displayName: "AvatarGroup___StyledTooltip",
  componentId: "sc-1rsx1j5-0"
})({
  whiteSpace: "break-spaces",
  lineHeight: "18px"
});
var _StyledLengthCountStyles = _styled(LengthCountStyles).withConfig({
  displayName: "AvatarGroup___StyledLengthCountStyles",
  componentId: "sc-1rsx1j5-1"
})(p => ({
  marginLeft: p.$_css
}));
//# sourceMappingURL=AvatarGroup.js.map