import { jsx, jsxs } from "react/jsx-runtime";
import { CircularProgress } from "@mui/material";
import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";
import react from "react";
import apollo_core from "@uipath/apollo-core";
const variantToProps = {
    primary: {
        variant: 'contained'
    },
    secondary: {
        variant: 'outlined',
        sx: {
            background: 'transparent'
        }
    },
    destructive: {
        className: 'warning'
    },
    tertiary: {},
    text: {
        variant: 'text',
        sx: {
            background: 'transparent'
        }
    },
    'text-foreground': {
        variant: 'text',
        sx: {
            color: 'var(--color-foreground)',
            '&&:hover': {
                backgroundColor: 'var(--color-background-hover)'
            },
            '&&:focus': {
                backgroundColor: 'var(--color-background-hover)'
            },
            '&&:focus-visible': {
                backgroundColor: 'var(--color-background-hover)'
            },
            '&&:active': {
                backgroundColor: 'var(--color-background-pressed)'
            }
        }
    }
};
function joinClasses(...classes) {
    return classes.filter(Boolean).join(' ');
}
const LoadingMouseInteractionBlocker = styled('div')({
    position: 'absolute',
    inset: 0,
    cursor: 'not-allowed'
});
const LabelLoadingIndicatorContainer = styled('div')({
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
});
const ApButton = /*#__PURE__*/ react.forwardRef((props, ref)=>{
    const { startIcon, endIcon, id, variant = 'primary', size = 'tall', widthMode = 'default', label, customContent, type = 'button', disabled = false, loading = false, onClick, href, tabIndex, expanded, title, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur, onKeyDown, ...rest } = props;
    const hasStartIcon = !!startIcon;
    const hasEndIcon = !!endIcon;
    const shouldShowLoadingAsStartIcon = loading && hasStartIcon;
    const shouldShowLoadingAsEndIcon = loading && !hasStartIcon && hasEndIcon;
    const shouldShowLoadingAsLabel = loading && !hasStartIcon && !hasEndIcon;
    const { sx: variantSx, ...restVariantProps } = variantToProps[variant];
    const { sx: userSx, ...restProps } = rest;
    const loadingIndicator = loading ? /*#__PURE__*/ jsx(ButtonLoadingIndicator, {
        "aria-label": label
    }) : null;
    return /*#__PURE__*/ jsxs("div", {
        style: {
            position: 'relative'
        },
        children: [
            /*#__PURE__*/ jsxs(StyledButton, {
                ref: ref,
                type: type,
                id: id,
                color: "secondary",
                ...disabled ? {
                    disabled: true
                } : {},
                disableElevation: true,
                onClick: loading ? void 0 : onClick,
                onKeyDown: onKeyDown,
                onMouseEnter: onMouseEnter,
                onMouseLeave: onMouseLeave,
                onMouseDown: onMouseDown,
                onMouseUp: onMouseUp,
                onFocus: onFocus,
                onBlur: onBlur,
                startIcon: loading && shouldShowLoadingAsStartIcon ? loadingIndicator : startIcon,
                endIcon: loading && shouldShowLoadingAsEndIcon ? loadingIndicator : endIcon,
                ...restVariantProps,
                sx: [
                    variantSx ?? {},
                    userSx ?? {}
                ],
                tabIndex: tabIndex ?? (loading ? -1 : void 0),
                "aria-disabled": disabled || loading ? 'true' : void 0,
                "aria-expanded": expanded,
                title: title,
                className: joinClasses(restVariantProps?.className, loading && 'loading'),
                href: href,
                customSize: size,
                customWidth: widthMode,
                ...restProps,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        style: {
                            opacity: shouldShowLoadingAsLabel ? 0 : 1
                        },
                        children: customContent ?? label
                    }),
                    shouldShowLoadingAsLabel && /*#__PURE__*/ jsx(LabelLoadingIndicatorContainer, {
                        children: loadingIndicator
                    })
                ]
            }),
            loading && /*#__PURE__*/ jsx(LoadingMouseInteractionBlocker, {})
        ]
    });
});
const StyledButton = styled(Button, {
    shouldForwardProp: (prop)=>'customSize' !== prop && 'customWidth' !== prop
})(({ customSize, customWidth })=>({
        '--border-radius': apollo_core.Border.BorderRadiusM,
        '--focus-border-offset': "1px",
        '--focus-border-width': apollo_core.Border.BorderThickM,
        '--focus-border-radius': "calc( var(--border-radius) + var(--focus-border-offset) + var(--focus-border-width) )",
        '--focus-border-inset': "calc( -1 * (var(--focus-border-offset) + var(--focus-border-width) + 1px))",
        position: 'relative',
        borderRadius: 'var(--border-radius)',
        minWidth: 'fit-content' === customWidth ? void 0 : '120px',
        height: 'tall' === customSize ? apollo_core.Spacing.SpacingXxl : apollo_core.Spacing.SpacingXl,
        '&.loading': {
            pointerEvents: 'none'
        },
        ':before': {
            content: "''",
            boxSizing: 'border-box',
            position: 'absolute',
            inset: "var(--focus-border-inset)",
            border: "var(--focus-border-width) solid var(--color-focus-indicator)",
            borderRadius: 'var(--focus-border-radius)',
            pointerEvents: 'none',
            display: 'none'
        },
        ':focus-visible': {
            outline: 'none',
            ':before': {
                display: 'block'
            }
        }
    }));
const StyledCircularProgress = styled(CircularProgress)({
    color: 'inherit !important',
    stroke: 'currentColor !important'
});
function ButtonLoadingIndicator(props) {
    return /*#__PURE__*/ jsx(StyledCircularProgress, {
        size: 16,
        ...props,
        className: props.className
    });
}
ApButton.displayName = 'ApButton';
export { ApButton };
