var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import { useEventListener } from '../../effects/EventListener';
import { mergeRefs } from '../../effects/mergeRefs';
import { Icon } from '../Icon';
import { StyledButton, StyledContent, StyledLabel, StyledLinkButton, StyledSpinner, } from './Button.styles';
/**
 * This is a temporary component to handle rendering either a string icon or a React node
 * Once we decommission the string API we can directly render the icon
 */
function LegacyIcon(_a) {
    var _b;
    var icon = _a.icon;
    if (typeof icon === 'string') {
        return React.createElement(Icon, { icon: icon, size: "sm" });
    }
    else if (React.isValidElement(icon)) {
        return React.cloneElement(icon, (_b = {}, _b['data-icon-prop'] = 'true', _b));
    }
    return null;
}
var ButtonContent = function (_a) {
    var _b;
    var children = _a.children, icon = _a.icon, iconRight = _a.iconRight, size = _a.size, variant = _a.variant;
    return (React.createElement(React.Fragment, null,
        React.createElement(StyledContent, null,
            React.createElement(LegacyIcon, { icon: icon }),
            React.Children.map(children, function (child) {
                return React.isValidElement(child) && child.type === Icon ? (child) : (React.createElement(StyledLabel, null, child));
            }),
            React.isValidElement(iconRight)
                ? React.cloneElement(iconRight, (_b = {}, _b['data-icon-prop'] = 'true', _b))
                : null),
        React.createElement(StyledSpinner, { size: size === 'lg' ? 'md' : 'sm', color: variant === 'primary' ? 'white' : 'gray15' })));
};
/**

 We use buttons to link to other pages or to trigger an action.
 Buttons clearly define what happens when a user clicks it.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-button--demo)

 @see [Design Guidelines](https://design.procore.com/button)

 */
export var Button = React.forwardRef(function Button(_a, ref) {
    var _b = _a.block, block = _b === void 0 ? false : _b, children = _a.children, _c = _a.disabled, disabled = _c === void 0 ? false : _c, icon = _a.icon, iconRight = _a.iconRight, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.type, type = _f === void 0 ? 'button' : _f, _g = _a.variant, variant = _g === void 0 ? 'primary' : _g, props = __rest(_a, ["block", "children", "disabled", "icon", "iconRight", "loading", "size", "type", "variant"]);
    return (React.createElement(StyledButton, __assign({ "aria-busy": loading || undefined, tabIndex: 0 }, props, { "$block": block, disabled: disabled || loading, "$loading": loading, "$size": size, "$variant": variant, type: type, ref: ref }),
        React.createElement(ButtonContent, { icon: icon, iconRight: iconRight, size: size, variant: variant }, children)));
});
export var LinkButton = React.forwardRef(function LinkButton(_a, ref) {
    var _b = _a.block, block = _b === void 0 ? false : _b, children = _a.children, disabled_ = _a.disabled, href_ = _a.href, icon = _a.icon, iconRight = _a.iconRight, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.variant, variant = _d === void 0 ? 'primary' : _d, props = __rest(_a, ["block", "children", "disabled", "href", "icon", "iconRight", "size", "variant"]);
    var innerRef = React.useRef(null);
    var mimicButtonRole = function (e) {
        var _a;
        var key = e.key;
        if (['Enter', 'Spacebar', ' '].indexOf(key) >= 0) {
            // Prevents the page to scroll when "space" is pressed
            e.preventDefault();
            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.click();
        }
    };
    useEventListener({
        event: 'keydown',
        handler: mimicButtonRole,
        scope: innerRef,
    });
    var disabled = disabled_ || !href_;
    var href = disabled ? undefined : href_;
    return (React.createElement(StyledLinkButton, __assign({}, props, { role: "button", "aria-disabled": disabled, href: href, "$disabled": disabled, "$block": block, "$size": size, "$variant": variant, ref: mergeRefs(ref, innerRef) }),
        React.createElement(ButtonContent, { icon: icon, iconRight: iconRight, size: size, variant: variant }, children)));
});
export default Button;
//# sourceMappingURL=Button.js.map