import React, { useContext } from 'react';
import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
import { isKonturIcon } from '../../lib/utils.js';
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
import { getStyles } from './ButtonIcon.styles.js';
import { LoadingButtonIcon } from './LoadingButtonIcon.js';
export var getButtonIconSizes = function (theme) {
    return {
        small: parseInt(theme.btnIconSizeSmall),
        medium: parseInt(theme.btnIconSizeMedium),
        large: parseInt(theme.btnIconSizeLarge),
    };
};
var useIcon = function (icon, size) {
    var _a;
    var theme = useContext(ThemeContext);
    if (icon && isKonturIcon(icon)) {
        var sizes = getButtonIconSizes(theme);
        return React.cloneElement(icon, { size: (_a = icon.props.size) !== null && _a !== void 0 ? _a : sizes[size] });
    }
    return icon;
};
export var ButtonIcon = function (_a) {
    var _b;
    var icon = _a.icon, use = _a.use, position = _a.position, hasChildren = _a.hasChildren, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.hasBothIcons, hasBothIcons = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 'small' : _e;
    var theme = useContext(ThemeContext);
    var cx = useEmotion().cx;
    var styles = useStyles(getStyles);
    var isLink = use === 'link';
    var getSizeIconClassName = function () {
        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 (React.createElement("span", { style: style, className: cx(styles.icon(), getSizeIconClassName(), (_b = {},
            _b[styles.iconNoMargin()] = !hasChildren,
            _b[styles.iconLeftLink(theme)] = isLink && position === 'left',
            _b[styles.iconRightLink(theme)] = isLink && position === 'right',
            _b)) }, loading && !hasBothIcons ? React.createElement(LoadingButtonIcon, { isCentered: false, size: size }) : _icon));
};
//# sourceMappingURL=ButtonIcon.js.map