import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef } from 'react';
import cls from 'classnames';
import { convertRoundnessMatrix } from '../../utils/roundness.js';
import { cx } from '../../utils/index.js';
import { base as base$1 } from './variations/_view/base.js';
import { base as base$2 } from './variations/_size/base.js';
import { base as base$3 } from './variations/_disabled/base.js';
import { base as base$4 } from './variations/_focused/base.js';
import { base as base$6 } from './variations/_stretching/base.js';
import { base as base$5 } from './variations/_blurred/base.js';
import { LoadWrap, StyledContentLeft, ButtonText, StyledAdditionalContent, ButtonValue, StyledContentRight, Loader, StyledSpinner, base } from './Button.styles.js';
import { tokens, classes } from './Button.tokens.js';

var _StyledSpinner;
var _excluded = ["children", "view", "size", "text", "value", "contentLeft", "contentRight", "contentPlacing", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching", "additionalContent"];
var buttonRoot = function buttonRoot(Root) {
  return /*#__PURE__*/forwardRef(function (props, ref) {
    var children = props.children,
      view = props.view,
      size = props.size,
      text = props.text,
      value = props.value,
      contentLeft = props.contentLeft,
      contentRight = props.contentRight,
      _props$contentPlacing = props.contentPlacing,
      contentPlacing = _props$contentPlacing === void 0 ? 'default' : _props$contentPlacing,
      isLoading = props.isLoading,
      loader = props.loader,
      stretch = props.stretch,
      square = props.square,
      pin = props.pin,
      disabled = props.disabled,
      focused = props.focused,
      outlined = props.outlined,
      className = props.className,
      blur = props.blur,
      style = props.style,
      _props$stretching = props.stretching,
      stretching = _props$stretching === void 0 ? 'auto' : _props$stretching,
      additionalContent = props.additionalContent,
      rest = _objectWithoutProperties(props, _excluded);
    var txt = typeof children === 'string' ? children : text;
    var hasRightContentMargin = Boolean(children || txt || value || contentRight);
    var hasLeftContentMargin = Boolean(contentLeft ? contentLeft && (txt || value) : txt || value);
    var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
    var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
    var squareClass = square ? classes.buttonSquare : undefined;
    var isLoadingClass = isLoading ? classes.buttonLoading : undefined;
    var buttonBorderRadius = pin ? convertRoundnessMatrix(pin, "var(".concat(tokens.buttonRadius, ")"), "var(".concat(tokens.buttonHeight, ")")) : "var(".concat(tokens.buttonRadius, ", calc(var(").concat(tokens.buttonHeight, ") / 4))");
    var contentPlacingMapper = {
      "default": 'center',
      relaxed: 'space-between'
    };
    var contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';
    return /*#__PURE__*/React__default.createElement(Root, _extends({
      type: "button",
      ref: ref,
      view: view,
      size: size,
      value: value,
      disabled: disabled,
      focused: focused || outlined,
      className: cx(squareClass, stretchingClass, classes.buttonItem, isLoadingClass, className),
      style: _objectSpread2(_objectSpread2({}, style), {}, {
        '--plasma_computed-btn-br': buttonBorderRadius,
        '--plasma_private-blur': blur
      })
    }, rest), /*#__PURE__*/React__default.createElement(LoadWrap, {
      contentPlacing: contentPlacementValue,
      isLoading: isLoading
    }, contentLeft && /*#__PURE__*/React__default.createElement(StyledContentLeft, {
      hasContentMargin: hasRightContentMargin
    }, contentLeft), txt ? /*#__PURE__*/React__default.createElement(ButtonText, {
      className: !additionalContent ? contentRelaxedClass : ''
    }, txt) : children, additionalContent && /*#__PURE__*/React__default.createElement(StyledAdditionalContent, {
      className: cls(contentRelaxedClass, _defineProperty({}, classes.buttonHasValue, Boolean(value)))
    }, additionalContent), value && /*#__PURE__*/React__default.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React__default.createElement(StyledContentRight, {
      hasContentMargin: hasLeftContentMargin
    }, contentRight)), isLoading && /*#__PURE__*/React__default.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React__default.createElement(StyledSpinner, null))));
  });
};
var buttonConfig = {
  name: 'Button',
  tag: 'button',
  layout: buttonRoot,
  base: base,
  variations: {
    view: {
      css: base$1
    },
    size: {
      css: base$2
    },
    disabled: {
      css: base$3,
      attrs: true
    },
    focused: {
      css: base$4
      // TODO: isLoading => disabled
    },
    blurred: {
      css: base$5
    },
    stretching: {
      css: base$6
    }
  },
  defaults: {
    view: 'secondary',
    size: 'm',
    stretching: 'auto'
  }
};

export { buttonConfig, buttonRoot };
