"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ACCENT_TYPES_AND_CLASSES_MAPPER = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _faCircleNotch = require("@fortawesome/free-solid-svg-icons/faCircleNotch");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _useTranslation = require("../hooks/use-translation");
var _types = require("./types");
var _tooltip = require("../tooltip");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const ACCENT_TYPES_AND_CLASSES_MAPPER = exports.ACCENT_TYPES_AND_CLASSES_MAPPER = {
  [_types.ACCENT_TYPES.PRIMARY]: 'primary',
  [_types.ACCENT_TYPES.SECONDARY]: 'secondary',
  [_types.ACCENT_TYPES.COMMAND]: 'command',
  [_types.ACCENT_TYPES.ICON]: 'secondary icon-button',
  [_types.ACCENT_TYPES.PRIMARY_ICON]: 'primary icon-button',
  [_types.ACCENT_TYPES.ROUND_ICON]: 'command round-icon-button',
  [_types.ACCENT_TYPES.ATTENTION]: 'attention',
  [_types.ACCENT_TYPES.GHOST]: 'ghost'
};
/** Buttons are used to make common actions immediately visible and easy to perform with one click.
 * [CAPITALIZATION] Sentence case (capitalize proper nouns i.e., Holdout).
    @midnight-gray-supported
    @alpine-light-supported
 */
const Button = /*#__PURE__*/_react.default.forwardRef(({
  formId,
  leftIcon,
  rightIcon,
  testId,
  leftIconTestId,
  rightIconTestId,
  tourId,
  fullWidth,
  tooltipDelayType,
  size,
  onClick = () => {},
  accentType = _types.ACCENT_TYPES.PRIMARY,
  autofocus = false,
  children = null,
  className = '',
  isDisabled = false,
  isLoading = false,
  loadingText = '',
  tooltipText = '',
  tooltipPlacement = _tooltip.TOOLTIP_PLACEMENT_TYPES.RIGHT,
  tooltipDocsLink = null,
  type = _types.BUTTON_TYPES.BUTTON,
  hasCustomButtonContent = false,
  ariaLabel,
  ...rest
}, ref) => {
  const {
    t
  } = (0, _useTranslation.useTranslation)();
  function getActiveButtonChildren() {
    if (isLoading && loadingText) {
      return null;
    }
    const hasIcon = Boolean(leftIcon || rightIcon);
    if (hasIcon) {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
        className: "button-content",
        children: [leftIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
          icon: leftIcon,
          "test-id": leftIconTestId || 'button-left-icon'
        }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: children
        }), rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
          icon: rightIcon,
          "test-id": rightIconTestId || 'button-right-icon'
        })]
      });
    }
    if (hasCustomButtonContent) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
        children: children
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "button-content",
      children: children
    });
  }
  const accentTypeClasses = ACCENT_TYPES_AND_CLASSES_MAPPER[accentType];
  const sizeClass = (accentType === _types.ACCENT_TYPES.ROUND_ICON || size === _types.BUTTON_SIZES.LG) && size; // XS, SM is currently supported only by ROUND_ICON type button. LG is supported by all

  const buttonEl = /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
    ...rest,
    autoFocus: autofocus,
    className: (0, _classnames.default)('button', className, accentTypeClasses, sizeClass, {
      'button-loading': isLoading,
      'full-width': fullWidth,
      'with-loading-text': Boolean(loadingText),
      'with-tooltip': Boolean(tooltipText)
    }),
    disabled: isDisabled || isLoading,
    form: formId,
    onClick: onClick,
    type: type,
    "test-id": testId,
    "tour-id": tourId,
    ref: ref,
    "aria-busy": isLoading,
    "aria-live": "polite" // notify screen readers about loading state changes
    ,
    "aria-label": ariaLabel || rest['aria-label'],
    children: [getActiveButtonChildren(), isLoading && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
      className: "button-loading-placeholder",
      "test-id": "button-loading-placeholder",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
        icon: _faCircleNotch.faCircleNotch,
        className: "button-loading-icon",
        "test-id": "button-loading-icon",
        spin: true
      }), loadingText ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: loadingText
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        role: "status",
        "aria-label": t('loading')
      }) // VoiceOver reads this, while it will not read aria label of the parent span
      ]
    })]
  });
  return Boolean(tooltipText) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
    content: tooltipText,
    placement: tooltipPlacement,
    docsLink: tooltipDocsLink,
    delayType: tooltipDelayType,
    children: buttonEl
  }) : buttonEl;
});
Button.displayName = 'Button';
var _default = exports.default = Button;