import React, { useCallback, useMemo } from "react";
import { StyledMultiAvatar, StyledMultiAvatarInner } from "./Styles";
/**
 * @component MultiAvatar
 * @description
 * The MultiAvatar component is used to represent user, and displays the profile picture, initials or fallback icon.
 *
 * @prop {url} - The image urls of the MultiAvatar.
 * @prop {size} - controls the size of an MultiAvatar (width and height) in pixels.
 * @prop {alt} - alt attributes of the imgs.
 *
 * @example
 * <MultiAvatar
 *  url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
 *  alt={["Profile picture of John", "Profile picture of Sarah"]} />
 *
 * @example
 * <MultiAvatar
 *  url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
 *  alt={["Profile picture of John", "Profile picture of Sarah"]}
 * >
 *  <Badge />
 * </MultiAvatar>
 *
 * @see
 * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
 * @see
 * https://design.activecollab.com/docs/components/avatar
 */
export const MultiAvatar = _ref => {
  let {
    url,
    alt,
    size = 24,
    className,
    children
  } = _ref;
  const setSize = useCallback(i => {
    switch (url.length) {
      case 1:
        return {
          width: size + "px",
          height: size + "px"
        };
      case 2:
        return {
          width: size / 2 + "px",
          height: size + "px"
        };
      case 3:
        if (i === 0) {
          return {
            width: size / 2 + "px",
            height: size + "px"
          };
        } else {
          return {
            width: size / 2 + "px",
            height: size / 2 + "px"
          };
        }
      default:
        return {
          width: size / 2 + "px",
          height: size / 2 + "px"
        };
    }
  }, [size, url.length]);
  const slicedUrl = useMemo(() => {
    if ((url == null ? void 0 : url.length) > 4) {
      return url.slice(0, 4);
    }
    return url;
  }, [url]);
  return /*#__PURE__*/React.createElement("span", {
    className: "tw-relative tw-inline-flex"
  }, /*#__PURE__*/React.createElement(StyledMultiAvatar, {
    style: {
      width: size + "px",
      height: size + "px"
    },
    className: className,
    $urlCount: url.length
  }, slicedUrl.map((v, i) => /*#__PURE__*/React.createElement(StyledMultiAvatarInner, {
    style: setSize(i),
    className: "c-multi-avatar__wrapper",
    key: "avatar_" + i
  }, /*#__PURE__*/React.createElement("img", {
    src: v,
    alt: alt && alt[i] ? alt[i] : "avatar_" + i,
    width: size,
    height: size
  })))), children);
};
MultiAvatar.displayName = "MultiAvatar";
//# sourceMappingURL=MultiAvatar.js.map