import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { forwardRef, useRef, useState, useId, useLayoutEffect, useContext } from 'react';
import { c as cx } from './index-SvGbrGuT.js';
import { u as useAccessibleColor, t as tinycolor } from './useAccessibleColor-BYKjkGRg.js';
import { a as Avatar } from './Avatar-COMPK7Ym.js';
import { S as SvgClose } from './close-DZj38AEh.js';
import { I as Icon } from './Icon-Bcil6aBo.js';
import { S as SrOnly } from './SrOnly-CrdBTl6E.js';
import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
import { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
import { useTrackingId } from './useTrackingId.js';

import './Chip.css';const chip = "_chip_11ba0_2";
const inner = "_inner_11ba0_15";
const close = "_close_11ba0_28";
const prefix = "_prefix_11ba0_41";
const avatar = "_avatar_11ba0_124";
const multiline = "_multiline_11ba0_133";
const styles = {
	chip: chip,
	inner: inner,
	close: close,
	prefix: prefix,
	avatar: avatar,
	multiline: multiline,
	"text-wrap": "_text-wrap_11ba0_145",
	"size-small": "_size-small_11ba0_160",
	"has-close": "_has-close_11ba0_186"
};

const Chip$1 = forwardRef((props, ref) => {
  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
  const {
    className,
    color,
    onClose,
    onClick,
    label,
    style,
    textWrap,
    prefix,
    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 = {
    "--int-bg-color": color && background,
    "--int-font-color": color && foreground,
    "--int-border-color": color && border,
    "--int-close-background-color": color ? bgObj.isDark() ? bgObj.lighten(15).toHexString() : bgObj.darken(15).toHexString() : "#14141429",
    ...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 }),
        !!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, ...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(--int-font-color)", size: props.size }) : null;
    return /* @__PURE__ */ jsx(
      Chip$1,
      {
        ref,
        "data-tracking-id": trackingId,
        ...props,
        prefix
      }
    );
  }
);
Chip.displayName = Chip$1.displayName;

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