import React, { useContext } from 'react';
import { isKonturIcon } from "../../../lib/utils";
import { cx } from "../../../lib/theming/Emotion";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { styles } from "../ButtonIcon.styles";
import { LoadingButtonIcon } from "../LoadingButtonIcon";
export var getButtonIconSizes = function getButtonIconSizes(theme) {
  return {
    small: parseInt(theme.btnIconSizeSmall),
    medium: parseInt(theme.btnIconSizeMedium),
    large: parseInt(theme.btnIconSizeLarge)
  };
};
var useIcon = function useIcon(icon, size) {
  var theme = useContext(ThemeContext);
  if (icon && isKonturIcon(icon)) {
    var _icon$props$size;
    var sizes = getButtonIconSizes(theme);
    return /*#__PURE__*/React.cloneElement(icon, {
      size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[size]
    });
  }
  return icon;
};
export var ButtonIcon = function ButtonIcon(_ref) {
  var _cx;
  var icon = _ref.icon,
    use = _ref.use,
    position = _ref.position,
    hasChildren = _ref.hasChildren,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    _ref$hasBothIcons = _ref.hasBothIcons,
    hasBothIcons = _ref$hasBothIcons === void 0 ? false : _ref$hasBothIcons,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'small' : _ref$size;
  var theme = useContext(ThemeContext);
  var isLink = use === 'link';
  var getSizeIconClassName = function getSizeIconClassName() {
    switch (size) {
      case 'large':
        return [styles.iconLarge(theme), position === 'left' ? styles.iconLargeLeft(theme) : styles.iconLargeRight(theme)];
      case 'medium':
        return [styles.iconMedium(theme), position === 'left' ? styles.iconMediumLeft(theme) : styles.iconMediumRight(theme)];
      case 'small':
      default:
        return [styles.iconSmall(theme), position === 'left' ? styles.iconSmallLeft(theme) : styles.iconSmallRight(theme)];
    }
  };
  var style = {
    display: 'inline-flex',
    alignItems: 'center'
  };
  var _icon = useIcon(icon, size);
  return /*#__PURE__*/(
    React.createElement("span", {
      style: style,
      className: cx(styles.icon(), getSizeIconClassName(), (_cx = {}, _cx[styles.iconNoMargin()] = !hasChildren, _cx[styles.iconLeftLink(theme)] = isLink && position === 'left', _cx[styles.iconRightLink(theme)] = isLink && position === 'right', _cx))
    }, loading && !hasBothIcons ? /*#__PURE__*/React.createElement(LoadingButtonIcon, {
      isCentered: false,
      size: size
    }) : _icon)
  );
};