import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SoftLoadingSpinner } from '../Loading';
import { getSecureRelForTarget } from '../../services';
import { SoftIcon, } from '../Icon';
import { TYPES as ICON_TYPES } from '../Icon/SoftIcon';
const colorToClassNameMap = {
    primary: 'softButtonEmpty--primary',
    danger: 'softButtonEmpty--danger',
    disabled: 'softButtonEmpty--disabled',
    text: 'softButtonEmpty--text',
    ghost: 'softButtonEmpty--ghost',
};
export const COLORS = Object.keys(colorToClassNameMap);
const sizeToClassNameMap = {
    xs: 'softButtonEmpty--xSmall',
    s: 'softButtonEmpty--small',
    l: 'softButtonEmpty--large',
};
export const SIZES = Object.keys(sizeToClassNameMap);
const iconSideToClassNameMap = {
    left: '',
    right: 'softButtonEmpty--iconRight',
};
export const ICON_SIDES = Object.keys(iconSideToClassNameMap);
const flushTypeToClassNameMap = {
    'left': 'softButtonEmpty--flushLeft',
    'right': 'softButtonEmpty--flushRight',
};
export const FLUSH_TYPES = Object.keys(flushTypeToClassNameMap);
export const SoftButtonEmpty = ({ children, className, iconType, iconSide, color, size, flush, isDisabled, isLoading, href, target, rel, type, buttonRef, contentProps, textProps, ...rest }) => {
    // If in the loading state, force disabled to true
    isDisabled = isLoading ? true : isDisabled;
    const classes = classNames('softButtonEmpty', colorToClassNameMap[color], sizeToClassNameMap[size], iconSideToClassNameMap[iconSide], flushTypeToClassNameMap[flush], className);
    const contentClassNames = classNames('softButtonEmpty__content', contentProps && contentProps.className);
    const textClassNames = classNames('softButtonEmpty__text', textProps && textProps.className);
    // Add an icon to the button if one exists.
    let buttonIcon;
    if (isLoading) {
        buttonIcon = (React.createElement(SoftLoadingSpinner, { className: "softButton__spinner", size: "m" }));
    }
    else if (iconType) {
        buttonIcon = (React.createElement(SoftIcon, { className: "softButtonEmpty__icon", type: iconType, size: "m", "aria-hidden": "true" }));
    }
    const innerNode = (React.createElement("span", Object.assign({}, contentProps, { className: contentClassNames }),
        buttonIcon,
        React.createElement("span", Object.assign({}, textProps, { className: textClassNames }), children)));
    // <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
    // this is a button and piggyback off its disabled styles.
    if (href && !isDisabled) {
        const secureRel = getSecureRelForTarget({ href, target, rel });
        return (React.createElement("a", Object.assign({ className: classes, href: href, target: target, rel: secureRel, ref: buttonRef }, rest), innerNode));
    }
    else {
        return (React.createElement("button", Object.assign({ disabled: isDisabled, className: classes, type: type, ref: buttonRef }, rest), innerNode));
    }
};
// @ts-ignore
SoftButtonEmpty.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    iconType: PropTypes.oneOf(ICON_TYPES),
    iconSide: PropTypes.oneOf(ICON_SIDES),
    color: PropTypes.oneOf(COLORS),
    size: PropTypes.oneOf(SIZES),
    flush: PropTypes.oneOf(FLUSH_TYPES),
    isDisabled: PropTypes.bool,
    href: PropTypes.string,
    target: PropTypes.string,
    rel: PropTypes.string,
    onClick: PropTypes.func,
    /**
     * Adds/swaps for loading spinner & disables
     */
    isLoading: PropTypes.bool,
    type: PropTypes.string,
    buttonRef: PropTypes.func,
    /**
     * Passes props to `softButtonEmpty__content` span
     */
    contentProps: PropTypes.object,
    /**
     * Passes props to `softButtonEmpty__text` span
     */
    textProps: PropTypes.object,
};
// @ts-ignore
SoftButtonEmpty.defaultProps = {
    type: 'button',
    iconSide: 'left',
    color: 'primary',
};
//# sourceMappingURL=SoftButtonEmpty.js.map