import React from 'react';
import { isElement } from 'react-is';
import { isKonturIcon } from "../../../../lib/utils";
import { cx } from "../../../../lib/theming/Emotion";
import { ThemeContext } from "../../../../lib/theming/ThemeContext";
import { InputLayoutContext } from "../InputLayoutContext";
import { stylesLayout } from "../InputLayout.styles";
export var InputLayoutAsideIcon = function InputLayoutAsideIcon(_ref) {
  var _ref$icon = _ref.icon,
    icon = _ref$icon === void 0 ? null : _ref$icon,
    side = _ref.side;
  var theme = React.useContext(ThemeContext);
  var _React$useContext = React.useContext(InputLayoutContext),
    focused = _React$useContext.focused,
    disabled = _React$useContext.disabled,
    size = _React$useContext.size;
  var sizes = {
    small: parseInt(theme.inputIconSizeSmall),
    medium: parseInt(theme.inputIconSizeMedium),
    large: parseInt(theme.inputIconSizeLarge)
  };
  var gaps = {
    small: parseInt(theme.inputIconGapSmall),
    medium: parseInt(theme.inputIconGapMedium),
    large: parseInt(theme.inputIconGapLarge)
  };
  var _icon = icon instanceof Function ? icon() : icon;
  if (isElement(icon) && isKonturIcon(icon)) {
    var _icon$props$size;
    _icon = /*#__PURE__*/React.cloneElement(icon, {
      size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[size]
    });
  }
  var style = {};
  if (side) {
    if (side === 'right') {
      style.marginLeft = gaps[size];
    } else {
      style.marginRight = gaps[size];
    }
  }
  return _icon ? /*#__PURE__*/
  React.createElement("span", {
    style: style,
    className: cx(stylesLayout.aside(), stylesLayout.icon(theme), focused && stylesLayout.iconFocus(theme), disabled && stylesLayout.iconDisabled(theme))
  }, _icon) : null;
};