"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Badge = Badge;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _faXmark = require("@fortawesome/free-solid-svg-icons/faXmark");
var _faCircleNotch = require("@fortawesome/free-solid-svg-icons/faCircleNotch");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _useTranslation = require("../hooks/use-translation");
var _button = require("../button");
var _tooltip = require("../tooltip");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Badges should label and highlight page content
 * [CAPITALIZATION] Use uppercase
 * @midnight-gray-supported
 * @alpine-light-supported
 */
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
  } = (0, _useTranslation.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: (0, _classnames.default)('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__*/(0, _jsxRuntime.jsx)(_button.Button, {
    onClick: onClose,
    size: _button.BUTTON_SIZES.XS,
    "aria-label": removeButtonAriaLabel ?? t('Remove badge button'),
    testId: "badge-close-icon",
    className: "remove-button",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
      icon: _faXmark.faXmark
    })
  });
  const badgeContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagName, {
    ...tagNameProps,
    "aria-label": shouldUseButtonTag ? ariaLabel || label : undefined,
    children: [icon && !isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
      icon: icon,
      className: "badge-icon"
    }), isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
      icon: _faCircleNotch.faCircleNotch,
      spin: true,
      className: "badge-icon",
      "test-id": `${testId}-spinner`
    }), children || label]
  });
  const renderBadgeComponent = renderChildren => {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
      content: tooltipText,
      placement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
      children: renderChildren
    });
  };
  if (isRemovable) {
    return renderBadgeComponent(/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: (0, _classnames.default)('badge-container', colors, {
        outlined,
        clickable: shouldUseButtonTag
      }),
      "test-id": badgeContainerTestId,
      children: [badgeContent, removeButton]
    }));
  }
  return renderBadgeComponent(badgeContent);
}