import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["className", "variant", "children", "size", "loading", "loadingAriaLabel", "loadingAriaLive", "disabled", "icon", "reversedOrder", "href", "target", "newTabLabel", "type", "onClick", "aria-label"];
import * as React from 'react';
import cx from 'classnames';
import Text from '../text/Text';
import Spinner from '../spinner/Spinner';
import { __DEV__, invariant } from '../utils';
export var BUTTON_LITE_SIZE = {
  XS: 'xs',
  S: 's'
};
export var BUTTON_LITE_VARIANT = {
  TRANSPARENT: 'transparent',
  TRANSPARENT_INVERTED: 'transparent-inverted',
  TRANSPARENT_LIGHT: 'transparent-light',
  TRANSPARENT_INDIGO: 'transparent-indigo',
  SOLID_LIGHT: 'solid-light',
  SOLID_INDIGO_LIGHT: 'solid-indigo-light'
};
var anchorRelatedProps = ['download', 'hreflang', 'ping', 'referrerpolicy', 'rel'];

var ButtonLite = function ButtonLite(_ref) {
  var className = _ref.className,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? BUTTON_LITE_VARIANT.TRANSPARENT : _ref$variant,
      children = _ref.children,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? BUTTON_LITE_SIZE.S : _ref$size,
      loading = _ref.loading,
      loadingAriaLabel = _ref.loadingAriaLabel,
      loadingAriaLive = _ref.loadingAriaLive,
      disabled = _ref.disabled,
      icon = _ref.icon,
      reversedOrder = _ref.reversedOrder,
      href = _ref.href,
      target = _ref.target,
      _ref$newTabLabel = _ref.newTabLabel,
      newTabLabel = _ref$newTabLabel === void 0 ? '(opens in a new tab)' : _ref$newTabLabel,
      type = _ref.type,
      onClick = _ref.onClick,
      ariaLabel = _ref['aria-label'],
      rest = _objectWithoutProperties(_ref, _excluded);

  var buttonClass = cx('sg-button-lite', "sg-button-lite--".concat(variant), "sg-button-lite--".concat(size), {
    'sg-button-lite--loading': loading,
    'sg-button-lite--reversed-order': reversedOrder
  }, className);
  var isDisabled = disabled || loading;
  var isLink = !!href;
  var hasIcon = icon !== undefined && icon !== null;

  if (__DEV__) {
    invariant(!(reversedOrder && !icon), "Using 'reversedOrder' property has no effect when 'icon' property is not set.");
    invariant(!(!isLink && (target || Object.keys(rest).some(function (p) {
      return anchorRelatedProps.includes(p);
    }))), "An anchor-related prop is not working when \"href\" is not provided: ".concat(Object.keys(rest)));
    invariant(!(isLink && type), '`type` prop is not working when href is provided');
  }

  var onButtonClick = function onButtonClick(e) {
    if (isLink && isDisabled) {
      return;
    }

    return onClick && onClick(e);
  };

  var TagToRender = isLink ? isDisabled ? 'span' : 'a' : 'button';
  return /*#__PURE__*/React.createElement(TagToRender, _extends({}, rest, {
    className: buttonClass,
    disabled: isDisabled,
    "aria-label": ariaLabel,
    type: type,
    target: target,
    href: href,
    onClick: onButtonClick // On iOS the :active pseudo state is triggered only when there is a touch event set on the HTML element
    // and we use active pseudo class to provide haptic feedback.
    ,
    onTouchStart: function onTouchStart() {
      return null;
    }
  }), loading && /*#__PURE__*/React.createElement(Spinner, {
    "aria-live": loadingAriaLive,
    "aria-label": loadingAriaLabel,
    className: "sg-button-lite__spinner",
    size: size === 'xs' ? 'xxsmall' : 'xsmall'
  }), hasIcon && /*#__PURE__*/React.createElement("span", {
    className: "sg-button-lite__icon"
  }, icon), /*#__PURE__*/React.createElement(Text, {
    className: "sg-button-lite__text",
    weight: "bold",
    size: "small"
  }, children, target === '_blank' && /*#__PURE__*/React.createElement("span", {
    className: "sg-visually-hidden"
  }, newTabLabel)));
};

export default ButtonLite;