"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = exports.getButtonStyle = void 0;
const react_1 = __importStar(require("react"));
const varsUtilities_1 = require("../../varsUtilities");
const components_1 = require("../../components");
const hooks_1 = require("../../hooks");
const utils_1 = require("../../utils");
const inlines_1 = require("inlines");
const stopPropagation = (e) => e.stopPropagation();
const getButtonStyle = (props, isButton = !!props.onClick) => {
    const { disabled, color: colorProp = 'primary' } = props;
    const isLight = props.light;
    const isGhost = props.ghost || props.size === 'xsmall';
    const style = {
        transitionDelay: '0s,0s,0s,0.1s,0.1s',
        transitionProperty: 'width,transform,opacity,box-shadow,border',
        transitionDuration: '0.15s,  0.1s,  0.15s, 0.1s, 0.1s',
        pointerEvents: disabled ? 'none' : 'auto',
        border: colorProp === 'system'
            ? `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal', 'default')}`
            : `1px solid transparent`,
        cursor: disabled ? 'not-allowed' : 'pointer',
        backgroundColor: isGhost
            ? 'transparent'
            : (0, varsUtilities_1.color)('action', colorProp, isLight ? 'subtleNormal' : 'normal'),
        '&:focus': !props.hideFocusState
            ? {
                outline: 'none',
                border: props.size !== 'xsmall'
                    ? `1px solid ${(0, varsUtilities_1.color)('content', 'inverted', 'primary')}`
                    : '1px solid transparent',
                boxShadow: `0px 0px 0px 2px ${colorProp === 'system'
                    ? (0, varsUtilities_1.color)('content', 'default')
                    : (0, varsUtilities_1.color)('action', colorProp, 'normal')}`,
            }
            : {
                outline: 'none',
                border: props.size === 'xsmall'
                    ? '1px solid transparent'
                    : isGhost || colorProp === 'system'
                        ? `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal', 'default')}`
                        : `1px solid transparent`,
                boxShadow: 'none',
            },
        '&:hover': {
            outline: 'none',
            backgroundColor: props.size === 'xsmall'
                ? 'transparent'
                : (0, varsUtilities_1.color)('action', colorProp, isLight || isGhost ? 'subtleHover' : 'hover'),
        },
        [utils_1.BpTablet]: {
            '&:hover': {
                backgroundColor: isGhost
                    ? 'transparent'
                    : (0, varsUtilities_1.color)('action', colorProp, isLight ? 'subtleNormal' : 'normal'),
            },
        },
        '&:active': {
            transform: 'scale(0.98)',
            backgroundColor: isGhost
                ? 'transparent'
                : (0, varsUtilities_1.color)('action', colorProp, isLight ? 'subtleNormal' : 'active'),
        },
        width: 'fit-content',
        opacity: disabled ? 0.6 : 1,
    };
    if (isButton) {
        style.cursor = 'pointer';
    }
    return style;
};
exports.getButtonStyle = getButtonStyle;
exports.Button = react_1.default.forwardRef((props, forwardedRef) => {
    let { children, fill, icon, afterIcon, loading, onClick, onPointerDown, onMouseEnter, onMouseLeave, keyboardShortcut, displayShortcut, onFocus, onBlur, size = 'medium', light, ghost, style, underline, ...rest } = props;
    const isLight = props.light;
    const isGhost = props.ghost || props.size === 'xsmall';
    let [isLoading, setIsLoading] = (0, react_1.useState)(false);
    let { disabled } = props;
    if (loading === true) {
        isLoading = loading;
    }
    else if (loading === false) {
        isLoading = false;
    }
    const buttonElem = (0, react_1.useRef)(null);
    (0, react_1.useImperativeHandle)(forwardedRef, () => buttonElem.current, []);
    const extendedOnClick = (0, react_1.useCallback)(async (e) => {
        const t = buttonElem.current;
        e.stopPropagation();
        t.blur();
        if (!t) {
            return;
        }
        let isSet = false;
        const timer = setTimeout(() => {
            if (!isSet) {
                setIsLoading(true);
            }
        }, 100);
        try {
            await onClick?.(e);
        }
        catch (e) {
            console.error(`Error from async click "${e.message}"`);
            t.style.transform = 'translateX(-10px)';
            setTimeout(() => {
                t.style.transform = 'translateX(10px)';
                setTimeout(() => {
                    t.style.transform = 'translateX(0px)';
                }, 100);
            }, 100);
        }
        isSet = true;
        setIsLoading(false);
        clearTimeout(timer);
    }, [onClick]);
    if (keyboardShortcut) {
        const timeRef = (0, react_1.useRef)();
        (0, react_1.useEffect)(() => {
            return () => {
                clearTimeout(timeRef.current);
            };
        }, []);
        const onKeyUp = (0, react_1.useCallback)((event) => {
            const t = buttonElem.current;
            t.style.transform = 'scale(0.96)';
            if (!t) {
                return;
            }
            setTimeout(() => {
                t.style.transform = 'scale(1)';
            }, 100);
            extendedOnClick(event);
        }, [extendedOnClick, timeRef]);
        (0, hooks_1.useKeyboardShortcut)(keyboardShortcut, onKeyUp, buttonElem);
    }
    if (isLoading) {
        loading = true;
    }
    if (loading) {
        disabled = true;
    }
    const contentColor = props.color === 'inverted' && size === 'xsmall'
        ? 'inverted'
        : props.color === 'inverted'
            ? 'default'
            : (isLight || isGhost) && props.color === 'alert'
                ? 'negative'
                : (isLight || isGhost) && props.color === 'neutral'
                    ? 'default'
                    : (isLight || isGhost) && props.color === 'primary'
                        ? 'brand'
                        : isLight || isGhost
                            ? 'default'
                            : props.color === 'alert'
                                ? 'inverted'
                                : props.color === 'system'
                                    ? 'default'
                                    : props.color === 'primary'
                                        ? 'inverted'
                                        : 'inverted';
    return (react_1.default.createElement(inlines_1.styled.button, { ref: buttonElem, disabled: disabled, onClick: onClick && extendedOnClick, onFocus: onFocus, onBlur: onBlur, onPointerDown: onPointerDown || stopPropagation, style: {
            padding: !children
                ? size === 'large'
                    ? '16px'
                    : size === 'medium'
                        ? '10px'
                        : size === 'small'
                            ? '6px'
                            : '6px'
                : size === 'large'
                    ? '10px 16px'
                    : size === 'medium'
                        ? '6px 16px'
                        : size === 'small'
                            ? '4px 12px'
                            : '0px 4px',
            borderRadius: size === 'large' || size === 'medium' || !children ? 8 : 4,
            width: !children ? '20px' : fill ? '100%' : null,
            color: (0, varsUtilities_1.color)('content', contentColor),
            position: 'relative',
            ...(0, exports.getButtonStyle)(props, true),
            ...style,
        }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...rest },
        react_1.default.createElement("div", { style: {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                whiteSpace: 'nowrap',
            } },
            isLoading && (react_1.default.createElement(inlines_1.styled.div, { style: { marginRight: 8, marginLeft: '-4px' } },
                react_1.default.createElement(components_1.ProgressCircle, { color: contentColor, loading: true }))),
            icon ? (react_1.default.createElement(inlines_1.styled.div, { style: {
                    marginRight: children ? 8 : 0,
                } }, icon)) : null,
            react_1.default.createElement(components_1.Text, { selectable: "none", style: {
                    display: 'flex',
                    alignItems: 'center',
                    textDecoration: size === 'xsmall' && underline ? 'underline' : 'inherit',
                    textUnderlineOffset: size === 'xsmall' && underline ? '2px' : '0px',
                }, color: contentColor, size: size === 'large' || size === 'medium' ? 16 : 14, weight: size === 'xsmall' ? 'medium' : 'strong' },
                children,
                displayShortcut && keyboardShortcut ? (react_1.default.createElement(components_1.KeyBoardshortcut, { keyboardShortcut: keyboardShortcut })) : null),
            afterIcon ? (react_1.default.createElement(inlines_1.styled.div, { style: {
                    display: 'flex',
                    marginLeft: icon || children ? 8 : 0,
                    width: 16,
                    height: 16,
                    maxWidth: icon || children ? 16 : null,
                    maxHeight: '100%',
                    alignItems: 'center',
                    justifyContent: 'center',
                } }, afterIcon)) : null)));
});
//# sourceMappingURL=index.js.map