import React from 'react';
import classNames from 'classnames';
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons/faCircleNotch';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { useTranslation } from '../hooks/use-translation';
import { ACCENT_TYPES, BUTTON_SIZES, BUTTON_TYPES } from './types';
import { Tooltip, TOOLTIP_PLACEMENT_TYPES as BUTTON_TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export const ACCENT_TYPES_AND_CLASSES_MAPPER = {
  [ACCENT_TYPES.PRIMARY]: 'primary',
  [ACCENT_TYPES.SECONDARY]: 'secondary',
  [ACCENT_TYPES.COMMAND]: 'command',
  [ACCENT_TYPES.ICON]: 'secondary icon-button',
  [ACCENT_TYPES.PRIMARY_ICON]: 'primary icon-button',
  [ACCENT_TYPES.ROUND_ICON]: 'command round-icon-button',
  [ACCENT_TYPES.ATTENTION]: 'attention',
  [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.forwardRef(({
  formId,
  leftIcon,
  rightIcon,
  testId,
  leftIconTestId,
  rightIconTestId,
  tourId,
  fullWidth,
  tooltipDelayType,
  size,
  onClick = () => {},
  accentType = ACCENT_TYPES.PRIMARY,
  autofocus = false,
  children = null,
  className = '',
  isDisabled = false,
  isLoading = false,
  loadingText = '',
  tooltipText = '',
  tooltipPlacement = BUTTON_TOOLTIP_PLACEMENT_TYPES.RIGHT,
  tooltipDocsLink = null,
  type = BUTTON_TYPES.BUTTON,
  hasCustomButtonContent = false,
  ariaLabel,
  ...rest
}, ref) => {
  const {
    t
  } = useTranslation();
  function getActiveButtonChildren() {
    if (isLoading && loadingText) {
      return null;
    }
    const hasIcon = Boolean(leftIcon || rightIcon);
    if (hasIcon) {
      return /*#__PURE__*/_jsxs("span", {
        className: "button-content",
        children: [leftIcon && /*#__PURE__*/_jsx(FontAwesomeIcon, {
          icon: leftIcon,
          "test-id": leftIconTestId || 'button-left-icon'
        }), children && /*#__PURE__*/_jsx("span", {
          children: children
        }), rightIcon && /*#__PURE__*/_jsx(FontAwesomeIcon, {
          icon: rightIcon,
          "test-id": rightIconTestId || 'button-right-icon'
        })]
      });
    }
    if (hasCustomButtonContent) {
      return /*#__PURE__*/_jsx(_Fragment, {
        children: children
      });
    }
    return /*#__PURE__*/_jsx("span", {
      className: "button-content",
      children: children
    });
  }
  const accentTypeClasses = ACCENT_TYPES_AND_CLASSES_MAPPER[accentType];
  const sizeClass = (accentType === ACCENT_TYPES.ROUND_ICON || size === BUTTON_SIZES.LG) && size; // XS, SM is currently supported only by ROUND_ICON type button. LG is supported by all

  const buttonEl = /*#__PURE__*/_jsxs("button", {
    ...rest,
    autoFocus: autofocus,
    className: classNames('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__*/_jsxs("span", {
      className: "button-loading-placeholder",
      "test-id": "button-loading-placeholder",
      children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
        icon: faCircleNotch,
        className: "button-loading-icon",
        "test-id": "button-loading-icon",
        spin: true
      }), loadingText ? /*#__PURE__*/_jsx("span", {
        children: loadingText
      }) : /*#__PURE__*/_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__*/_jsx(Tooltip, {
    content: tooltipText,
    placement: tooltipPlacement,
    docsLink: tooltipDocsLink,
    delayType: tooltipDelayType,
    children: buttonEl
  }) : buttonEl;
});
Button.displayName = 'Button';
export default Button;