import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
/* empty css                        */
const getInitials = (name = "") => {
  const [firstName, lastName] = name.split(" ");
  if (firstName && lastName) {
    return `${firstName.charAt(0)}${lastName.charAt(0)}`;
  }
  return name.charAt(0);
};
const getAvatarColor = (name = "") => {
  const colors = [
    "#FF6B6B",
    // Red
    "#4ECDC4",
    // Teal
    "#45B7D1",
    // Blue
    "#96CEB4",
    // Green
    "#FFEAA7",
    // Yellow
    "#DDA0DD",
    // Plum
    "#98D8C8",
    // Mint
    "#F7DC6F",
    // Light Yellow
    "#BB8FCE",
    // Light Purple
    "#85C1E9",
    // Light Blue
    "#F8C471",
    // Orange
    "#82E0AA",
    // Light Green
    "#F1948A",
    // Light Red
    "#85929E",
    // Gray
    "#D7BDE2",
    // Lavender
    "#1A237E",
    // Deep Purple
    "#283593",
    // Indigo
    "#283593"
    // Indigo
  ];
  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash);
  }
  const colorIndex = Math.abs(hash) % colors.length;
  return colors[colorIndex];
};
const ChatAvatar = ({ src, name, size }) => {
  const [hasError, setHasError] = useState(false);
  useEffect(() => {
    setHasError(false);
  }, [src]);
  const handleError = () => {
    setHasError(true);
  };
  const showImage = src && !hasError;
  const avatarColor = getAvatarColor(name);
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: `avatar avatar--${size}`,
      style: !showImage ? { backgroundColor: avatarColor } : {},
      title: name,
      children: showImage ? /* @__PURE__ */ jsx("img", { alt: name, src, onError: handleError }) : /* @__PURE__ */ jsx("span", { className: "avatar__initials", children: getInitials(name) })
    }
  );
};
const MoreAvatar = ({ count, size }) => {
  return /* @__PURE__ */ jsx("div", { className: `avatar avatar--${size} avatar--more`, title: `${count} more`, children: /* @__PURE__ */ jsxs("span", { children: [
    "+",
    count
  ] }) });
};
const AvatarGroup = ({ avatars = [], maxAvatars = 3, size = "md" }) => {
  const effectiveMaxAvatars = Math.min(Math.max(1, maxAvatars), avatars.length);
  const visibleAvatars = avatars.slice(0, effectiveMaxAvatars);
  const hiddenAvatarsCount = Math.max(0, avatars.length - effectiveMaxAvatars);
  return /* @__PURE__ */ jsxs("div", { className: "avatar-stack", children: [
    visibleAvatars.map((user, index) => {
      return /* @__PURE__ */ jsx(
        "div",
        {
          className: `avatar-wrapper avatar-wrapper--${size}`,
          style: { zIndex: index },
          children: /* @__PURE__ */ jsx(ChatAvatar, { name: user.label, size, src: user.url })
        },
        user.id || index
      );
    }),
    hiddenAvatarsCount > 0 && /* @__PURE__ */ jsx(
      "div",
      {
        className: `avatar-wrapper avatar-wrapper--${size}`,
        style: { zIndex: visibleAvatars.length + 1 },
        children: /* @__PURE__ */ jsx(MoreAvatar, { count: hiddenAvatarsCount, size })
      }
    )
  ] });
};
export {
  ChatAvatar,
  AvatarGroup as default
};
