import React from 'react';
import classNames from 'classnames';
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons/faCircleNotch';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { useTranslation } from '../hooks/use-translation';
import { BUTTON_SIZES, Button } from '../button';
import { Tooltip, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/** Badges should label and highlight page content
 * [CAPITALIZATION] Use uppercase
 * @midnight-gray-supported
 * @alpine-light-supported
 */
export function Badge({
  children,
  onClick,
  onClose,
  label = '',
  badgeClassNames = '',
  tooltipText = '',
  icon = null,
  outlined = false,
  error = false,
  success = false,
  info = false,
  warning = false,
  plain = false,
  dark = false,
  /* data viz */
  pink = false,
  turquoise = false,
  purple = false,
  blue = false,
  orange = false,
  apple = false,
  /* data viz end */
  isLoading = false,
  isDisabled = false,
  testId = 'badge-button',
  badgeContainerTestId = 'badge-container',
  removeButtonAriaLabel,
  ariaLabel
}) {
  const {
    t
  } = useTranslation();
  const isClickableType = !isDisabled && !isLoading;
  const shouldUseButtonTag = isClickableType && typeof onClick === 'function';
  const TagName = shouldUseButtonTag ? 'button' : 'span';
  const isRemovable = typeof onClose === 'function' && !isDisabled && !isLoading;
  const colors = {
    error,
    success,
    warning,
    info,
    plain,
    dark,
    /* data viz */
    pink,
    turquoise,
    purple,
    blue,
    orange,
    apple
    /* data viz end */
  };
  const tagNameProps = {
    className: classNames('highlighted-badge', colors, {
      outlined,
      disabled: isDisabled,
      loading: isLoading,
      clickable: shouldUseButtonTag,
      'has-remove-button': isRemovable
    }, badgeClassNames),
    'test-id': testId,
    onClick: typeof onClick === 'function' && isClickableType ? event => {
      event.stopPropagation();
      onClick(event);
    } : undefined
  };
  const removeButton = isRemovable && /*#__PURE__*/_jsx(Button, {
    onClick: onClose,
    size: BUTTON_SIZES.XS,
    "aria-label": removeButtonAriaLabel ?? t('Remove badge button'),
    testId: "badge-close-icon",
    className: "remove-button",
    children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: faXmark
    })
  });
  const badgeContent = /*#__PURE__*/_jsxs(TagName, {
    ...tagNameProps,
    "aria-label": shouldUseButtonTag ? ariaLabel || label : undefined,
    children: [icon && !isLoading && /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: icon,
      className: "badge-icon"
    }), isLoading && /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: faCircleNotch,
      spin: true,
      className: "badge-icon",
      "test-id": `${testId}-spinner`
    }), children || label]
  });
  const renderBadgeComponent = renderChildren => {
    return /*#__PURE__*/_jsx(Tooltip, {
      content: tooltipText,
      placement: TOOLTIP_PLACEMENT_TYPES.TOP,
      children: renderChildren
    });
  };
  if (isRemovable) {
    return renderBadgeComponent(/*#__PURE__*/_jsxs("div", {
      className: classNames('badge-container', colors, {
        outlined,
        clickable: shouldUseButtonTag
      }),
      "test-id": badgeContainerTestId,
      children: [badgeContent, removeButton]
    }));
  }
  return renderBadgeComponent(badgeContent);
}