import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["color", "children", "className", "disabled", "element", "active", "fullWidth", "icon", "iconPlacement", "label", "level", "size", "type", "processing"];
import cx from 'classnames';
import React, { forwardRef } from 'react';
import Box from '../box';
import LoadingSpinner from '../loadingSpinner';
import { UITextBody, UITextDisplay, UITextSmall } from '../typography';
import theme from './theme.css';
export var BUTTON_LEVELS;

(function (BUTTON_LEVELS) {
  BUTTON_LEVELS["outline"] = "outline";
  BUTTON_LEVELS["primary"] = "primary";
  BUTTON_LEVELS["secondary"] = "secondary";
  BUTTON_LEVELS["destructive"] = "destructive";
  BUTTON_LEVELS["link"] = "link";
  BUTTON_LEVELS["timer"] = "timer";
})(BUTTON_LEVELS || (BUTTON_LEVELS = {}));

var textComponentMap = {
  tiny: UITextSmall,
  small: UITextBody,
  medium: UITextBody,
  large: UITextDisplay
};
var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _cx;

  var _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'teal' : _ref$color,
      children = _ref.children,
      className = _ref.className,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      _ref$element = _ref.element,
      element = _ref$element === void 0 ? 'button' : _ref$element,
      _ref$active = _ref.active,
      active = _ref$active === void 0 ? false : _ref$active,
      _ref$fullWidth = _ref.fullWidth,
      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
      icon = _ref.icon,
      _ref$iconPlacement = _ref.iconPlacement,
      iconPlacement = _ref$iconPlacement === void 0 ? 'left' : _ref$iconPlacement,
      label = _ref.label,
      _ref$level = _ref.level,
      level = _ref$level === void 0 ? BUTTON_LEVELS.secondary : _ref$level,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'button' : _ref$type,
      _ref$processing = _ref.processing,
      processing = _ref$processing === void 0 ? false : _ref$processing,
      others = _objectWithoutProperties(_ref, _excluded);

  var getSpinnerColor = function getSpinnerColor() {
    switch (level) {
      case BUTTON_LEVELS.secondary:
        return 'teal';

      case BUTTON_LEVELS.outline:
        return color === 'white' ? 'neutral' : color;

      case BUTTON_LEVELS.link:
        return 'aqua';

      default:
        return 'neutral';
    }
  };

  var getSpinnerTint = function getSpinnerTint() {
    switch (level) {
      case BUTTON_LEVELS.secondary:
        return 'darkest';

      case BUTTON_LEVELS.outline:
        return color === 'white' ? 'lightest' : 'darkest';

      case BUTTON_LEVELS.link:
        return 'dark';

      default:
        return 'lightest';
    }
  };

  var getSpinnerSize = function getSpinnerSize() {
    switch (size) {
      case 'tiny':
      case 'small':
        return 'small';

      default:
        return 'medium';
    }
  };

  var classNames = cx(theme['reset-box-sizing'], theme['reset-font-smoothing'], theme['button-base'], theme['button'], theme[level], theme[size], (_cx = {}, _defineProperty(_cx, theme['has-icon-only'], !children && !label || Array.isArray(children) && !children[0] && !label), _defineProperty(_cx, theme[color], level === BUTTON_LEVELS.outline), _defineProperty(_cx, theme['is-disabled'], disabled), _defineProperty(_cx, theme['is-full-width'], fullWidth), _defineProperty(_cx, theme['is-processing'], processing), _defineProperty(_cx, theme['is-active'], active), _cx), className);
  var Text = textComponentMap[size];
  return /*#__PURE__*/React.createElement(Box, _extends({}, others, {
    className: classNames,
    "data-teamleader-ui": "button",
    disabled: element === 'button' ? disabled : undefined,
    element: element,
    ref: ref,
    type: element === 'button' ? type : undefined
  }), icon && iconPlacement === 'left' && icon, (label || children) && /*#__PURE__*/React.createElement(Text, {
    element: "span",
    maxLines: 1,
    marginLeft: icon && iconPlacement === 'left' ? 2 : undefined,
    marginRight: icon && iconPlacement === 'right' ? 2 : undefined
  }, label, children), icon && iconPlacement === 'right' && icon, processing && /*#__PURE__*/React.createElement(LoadingSpinner, {
    className: theme['spinner'],
    color: getSpinnerColor(),
    size: getSpinnerSize(),
    tint: getSpinnerTint()
  }));
});
Button.displayName = 'Button';
export default Button;