import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SoftNotificationBadge } from '../Badge';
import { SoftLoadingSpinner } from '../Loading';
export const SoftFacetButton = ({ children, className, icon, isDisabled, isLoading, isSelected, quantity, buttonRef, ...rest }) => {
    // If in the loading state, force disabled to true
    isDisabled = isLoading ? true : isDisabled;
    const classes = classNames('softFacetButton', {
        'softFacetButton--isSelected': isSelected,
        'softFacetButton--unSelected': !isSelected,
    }, className);
    // Add quanity number if provided or loading indicator
    let buttonQuantity;
    if (isLoading) {
        buttonQuantity = (React.createElement(SoftLoadingSpinner, { className: "softFacetButton__spinner", size: "m" }));
    }
    else if (typeof quantity === 'number') {
        buttonQuantity = (React.createElement(SoftNotificationBadge, { className: "softFacetButton__quantity", size: "m", color: !isSelected || isDisabled ? 'subdued' : 'accent' }, quantity));
    }
    // Add an icon to the button if one exists.
    let buttonIcon;
    if (icon) {
        buttonIcon = React.cloneElement(icon, { className: 'softFacetButton__icon' });
    }
    let dataText;
    if (typeof children === 'string') {
        dataText = children;
    }
    return (React.createElement("button", Object.assign({ className: classes, disabled: isDisabled, type: "button", ref: buttonRef }, rest),
        React.createElement("span", { className: "softFacetButton__content" },
            buttonIcon,
            React.createElement("span", { "data-text": dataText, className: "softFacetButton__text" }, children),
            buttonQuantity)));
};
// @ts-ignore
SoftFacetButton.propTypes = {
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    isDisabled: PropTypes.bool,
    onClick: PropTypes.func,
    buttonRef: PropTypes.func,
    /**
     * Any node, but preferrably a `SoftIcon` or `SoftAvatar`
     */
    icon: PropTypes.node,
    /**
     * Adds/swaps for loading spinner & disables
     */
    isLoading: PropTypes.bool,
    /**
     * Changes visual of button to indicate it's currently selected
     */
    isSelected: PropTypes.bool,
    /**
     * Adds a notification indicator for displaying the quantity provided
     */
    quantity: PropTypes.number,
};
// @ts-ignore
SoftFacetButton.defaultProps = {
    isDisabled: false,
    isLoading: false,
    isSelected: false,
};
//# sourceMappingURL=SoftFacetButton.js.map