import "../Avatar.css";
import { jsx } from "react/jsx-runtime";
import { hex2hsl, hsl2str } from "./internal/functions.js";
import md5 from "./internal/md5.js";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
import Tooltip from "./Tooltip.js";
const base = "Avatar_base_8a380";
const square = "Avatar_square_8a380";
const small = "Avatar_small_8a380";
const medium = "Avatar_medium_8a380";
const large = "Avatar_large_8a380";
const inactive = "Avatar_inactive_8a380";
const group = "Avatar_group_8a380";
const css = {
  base,
  square,
  "extra-small": "Avatar_extra-small_8a380",
  small,
  medium,
  large,
  "extra-large": "Avatar_extra-large_8a380",
  inactive,
  group
};
const Size = {
  ExtraLarge: "extra-large",
  ExtraSmall: "extra-small",
  Large: "large",
  Medium: "medium",
  Small: "small"
};
const getInitials = (name = "") => {
  const initials = name.split(/\s+/).map((n) => n.charAt(0).toUpperCase()).join("");
  return initials.length > 2 ? `${initials.charAt(0)}${initials.substring(initials.length - 1)}` : initials;
};
const getColor = (name = "", themeIsDark, palette) => {
  const hslColor = name ? hex2hsl(md5(name).substring(0, 6)) : hex2hsl("#808080");
  if (palette === "muted") {
    return hsl2str({
      ...hslColor,
      l: themeIsDark ? 80 : 90,
      s: themeIsDark ? 40 : 77
    });
  }
  return hsl2str({
    ...hslColor,
    l: themeIsDark ? 38 : 60
  });
};
const Avatar = ({
  text,
  hideTooltip,
  noColor,
  size = Size.Small,
  square: square2,
  palette = "bright",
  tooltipText,
  inactive: inactive2
}) => {
  const {
    themeSettings: { themeIsDark, className: themeClass }
  } = useTheme();
  const style = {
    backgroundColor: noColor ? "var(--theme-stage-strong)" : getColor(text, themeIsDark, palette),
    color: noColor ? "var(--theme-stage-on-strong)" : palette === "bright" ? "white" : "black"
  };
  const classes = [css.base, css[size], themeClass];
  if (square2)
    classes.push(css.square);
  if (inactive2)
    classes.push(css.inactive);
  const avatar = /* @__PURE__ */ jsx("div", { className: classes.join(" "), id: "avatar", style, children: getInitials(text) });
  return hideTooltip ? avatar : /* @__PURE__ */ jsx(Tooltip, { content: tooltipText ?? text, placement: "right", children: avatar });
};
const AvatarGroup = ({ items, ...rest }) => {
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const classes = [css.group, themeClass];
  return /* @__PURE__ */ jsx("div", { className: classes.join(" "), children: items.map((item, idx) => /* @__PURE__ */ jsx(Avatar, { text: item, ...rest }, idx)) });
};
export {
  AvatarGroup,
  Size,
  Avatar as default,
  getColor,
  getInitials
};
