import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { forwardRef, useRef, useState, useId, useLayoutEffect, useContext } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { u as useAccessibleColor, t as tinycolor } from './useAccessibleColor-BYKjkGRg.js';
import { a as Avatar } from './Avatar-CoQcOHWU.js';
import { S as SvgClose } from './close-DZj38AEh.js';
import { I as Icon } from './Icon-B4uCvMU9.js';
import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
import { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
import { A as AiMark } from './AiMark-voHPSerQ.js';
import { useTrackingId } from './useTrackingId.js';

import './Chip.css';const chip = "_chip_9zzbi_1";
const close = "_close_9zzbi_51";
const inner = "_inner_9zzbi_64";
const prefix = "_prefix_9zzbi_142";
const avatar = "_avatar_9zzbi_175";
const multiline = "_multiline_9zzbi_188";
const styles = {
	chip: chip,
	close: close,
	inner: inner,
	prefix: prefix,
	avatar: avatar,
	multiline: multiline,
	"text-wrap": "_text-wrap_9zzbi_193",
	"size-small": "_size-small_9zzbi_201",
	"has-close": "_has-close_9zzbi_213"
};

const Chip$1 = forwardRef((props, ref) => {
  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
  const {
    className,
    color,
    onClose,
    onClick,
    label,
    style,
    textWrap,
    prefix,
    suffix,
    avatar,
    size = "medium",
    tabIndex,
    ...rest
  } = componentProps;
  const innerRef = useRef(null);
  const [isMultiline, setIsMultiline] = useState(false);
  const descriptionId = useId();
  useLayoutEffect(() => {
    const element = innerRef.current;
    const getSingleLineHeight = (element2) => {
      if (avatar == null) return 0;
      if (!element2) return 0;
      const computedStyle = getComputedStyle(element2);
      const lineHeight = parseFloat(computedStyle.lineHeight);
      const paddingTop = parseFloat(computedStyle.paddingTop);
      const paddingBottom = parseFloat(computedStyle.paddingBottom);
      return lineHeight + paddingTop + paddingBottom;
    };
    const singleLineHeight = getSingleLineHeight(element);
    const observer = new ResizeObserver(() => {
      if (element && avatar != null) {
        setIsMultiline(element.clientHeight > singleLineHeight * 1.5);
      }
    });
    if (element) {
      observer.observe(element);
    }
    return () => {
      if (element) {
        observer.unobserve(element);
      }
    };
  }, [avatar]);
  const removeText = ", removeable chip";
  const newLabel = `${label}${onClose ? removeText : ""}`;
  const ChipClassNames = cx(styles["chip"], className, {
    [styles["size-small"]]: size === "small",
    [styles["has-close"]]: !!onClose,
    [styles["text-wrap"]]: textWrap
  });
  const AvatarClassNames = cx(styles["avatar"], {
    [styles["multiline"]]: textWrap && isMultiline
  });
  const { mode: themeMode } = useContext(ThemeProviderContext);
  const { mode: sysMode } = usePrefersColorScheme();
  const mode = themeMode ?? sysMode;
  const { foreground, background, border } = useAccessibleColor(color, mode);
  const bgObj = tinycolor(background);
  const styleWithColor = {
    "--a2-inline-bg-color": color && background,
    "--a2-inline-bg-color-hover": color && bgObj.lighten(10).toHexString(),
    "--a2-inline-bg-color-active": color && bgObj.darken(10).toHexString(),
    "--a2-inline-font-color": color && foreground,
    "--a2-inline-border-color": color && border,
    "--a2-inline-close-background-color-hover": color ? bgObj.isDark() ? bgObj.lighten(10).toHexString() : bgObj.darken(10).toHexString() : void 0,
    "--a2-inline-close-background-color-active": color ? bgObj.isDark() ? bgObj.lighten(15).toHexString() : bgObj.darken(15).toHexString() : void 0,
    ...style,
    ...layoutStyles
  };
  const onKeyUpHandler = (e) => {
    switch (e.code) {
      case "Delete":
      case "Backspace":
        onClose?.(e);
        break;
      case "Enter":
      case "Space":
        onClick?.(e);
        break;
    }
  };
  return /* @__PURE__ */ jsxs(
    "span",
    {
      className: ChipClassNames,
      style: styleWithColor,
      "data-anv": "chip",
      role: onClick ? "button" : void 0,
      ...onClick || onClose ? { ["aria-label"]: newLabel } : {},
      ...onClose ? { ["aria-describedby"]: descriptionId } : {},
      ...rest,
      ref,
      onClick,
      onKeyUp: onKeyUpHandler,
      tabIndex: onClick || onClose ? 0 : tabIndex,
      children: [
        avatar != null ? /* @__PURE__ */ jsx("span", { className: AvatarClassNames, children: /* @__PURE__ */ jsx(
          Avatar,
          {
            className: styles.avatarInner,
            name: label,
            color,
            image: avatar,
            size: size === "small" ? "xsmall" : "small"
          }
        ) }) : null,
        prefix != null ? /* @__PURE__ */ jsx("span", { className: styles.prefix, children: prefix }) : null,
        /* @__PURE__ */ jsx("span", { className: styles.inner, ref: innerRef, children: label }),
        suffix != null ? /* @__PURE__ */ jsx("span", { className: styles.suffix, children: suffix }) : null,
        !!onClose && /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(
            "span",
            {
              "aria-hidden": true,
              className: styles["close"],
              onClick: (e) => {
                e.stopPropagation();
                onClose(e);
              },
              children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, svg: SvgClose, size })
            }
          ),
          /* @__PURE__ */ jsx(SrOnly, { id: descriptionId, children: "Press Delete or Backspace to remove." })
        ] })
      ]
    }
  );
});
Chip$1.displayName = "Chip";

const Chip = forwardRef(
  ({
    icon,
    aiMark,
    onBlur,
    onFocus,
    onMouseEnter,
    onMouseLeave,
    ...props
  }, ref) => {
    const data = {
      label: props.label,
      size: props.size,
      color: props.color
    };
    const trackingId = useTrackingId({
      name: "Chip",
      data,
      hasOverride: !!props["data-tracking-id"]
    });
    const prefix = icon != null ? /* @__PURE__ */ jsx(
      Icon,
      {
        svg: icon,
        color: "var(--a2-inline-font-color)",
        size: props.size
      }
    ) : null;
    const aiMarkType = props.color ? "default" : "gradient";
    const suffix = aiMark ? /* @__PURE__ */ jsx(
      AiMark,
      {
        type: aiMarkType,
        size: "small",
        color: props.color ? "var(--int-font-color)" : void 0
      }
    ) : void 0;
    const interactionProps = {
      onMouseEnter,
      onMouseLeave,
      onFocus,
      onBlur
    };
    return /* @__PURE__ */ jsx(
      Chip$1,
      {
        ref,
        "data-tracking-id": trackingId,
        ...props,
        ...interactionProps,
        prefix,
        suffix
      }
    );
  }
);
Chip.displayName = Chip$1.displayName;

export { Chip as C };
//# sourceMappingURL=Chip-CxgryK86.js.map
