import { useTheme } from '@wise/components-theming';
import { clsx } from 'clsx';
import { useRef, useEffect } from 'react';
import Body from '../body/Body.mjs';
import { CloseButton } from '../common/closeButton/CloseButton.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Typography } from '../common/propsValues/typography.mjs';

const Chip = ({
  label,
  value,
  onRemove,
  onClick,
  onKeyPress,
  className = undefined,
  'aria-label': ariaLabel,
  'aria-checked': ariaChecked,
  role,
  closeButton
}) => {
  const isActionable = onClick || onKeyPress;
  const defaultRole = isActionable ? 'button' : undefined;
  const tabIndex = isActionable ? 0 : -1;
  const {
    isModern
  } = useTheme();
  const closeButtonReference = useRef(null);
  const previousCloseButtonShown = useRef(undefined);
  useEffect(() => {
    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {
      closeButtonReference.current?.focus();
    }
    previousCloseButtonShown.current = closeButtonReference.current != null;
  }, [onRemove]);
  return /*#__PURE__*/jsxs("div", {
    role: role ?? defaultRole,
    tabIndex: tabIndex,
    "aria-label": ariaLabel,
    "aria-checked": ariaChecked,
    className: clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
    ...(isActionable && {
      onClick,
      onKeyPress
    }),
    children: [isModern ? /*#__PURE__*/jsx(Body, {
      "aria-hidden": !!onRemove,
      type: Typography.BODY_DEFAULT_BOLD,
      children: label
    }) : /*#__PURE__*/jsx("span", {
      "aria-hidden": "false",
      className: "np-chip-label",
      children: label
    }), onRemove ? /*#__PURE__*/jsx(CloseButton, {
      ref: closeButtonReference,
      className: isModern ? `btn-unstyled` : `btn-unstyled m-l-1`,
      "aria-label": closeButton?.['aria-label'],
      size: "sm",
      filled: isModern,
      onClick: onRemove
    }) : null]
  }, value);
};

export { Chip as default };
//# sourceMappingURL=Chip.mjs.map
