import { jsx } from "react/jsx-runtime";
import Close from "@mui/icons-material/Close";
import { Chip, CircularProgress, Tooltip } from "@mui/material";
import { styled } from "@mui/material/styles";
import apollo_core from "@uipath/apollo-core";
import react from "react";
const StyledChip = styled(Chip, {
    shouldForwardProp: (prop)=>'error' !== prop && 'loading' !== prop
})(({ error })=>({
        backgroundColor: 'var(--color-background-gray)',
        borderRadius: '1000px',
        boxSizing: 'border-box',
        color: 'var(--color-foreground)',
        fontWeight: apollo_core.FontFamily.FontWeightDefault,
        gap: apollo_core.Spacing.SpacingXs,
        height: apollo_core.Spacing.SpacingXl,
        outline: 'none',
        paddingLeft: apollo_core.Spacing.SpacingS,
        paddingRight: apollo_core.Spacing.SpacingS,
        cursor: 'default',
        '.MuiChip-label': {
            padding: 0
        },
        '.MuiChip-deleteIcon': {
            margin: 0,
            color: 'inherit',
            '&:hover': {
                color: 'inherit'
            }
        },
        ':hover': {
            backgroundColor: 'var(--color-background-hover)'
        },
        ':focus-visible:not(.Mui-disabled)': {
            backgroundColor: 'var(--color-background-gray)',
            outline: `${apollo_core.Border.BorderThickS} solid var(--color-focus-indicator)`,
            outlineOffset: apollo_core.Spacing.SpacingMicro
        },
        '&.Mui-disabled': {
            outline: 'none !important',
            backgroundColor: 'var(--color-background-disabled)',
            color: 'var(--color-foreground-light)',
            opacity: 1
        },
        ...error && {
            backgroundColor: 'var(--color-error-background) !important',
            color: 'var(--color-foreground) !important',
            fontWeight: apollo_core.FontFamily.FontWeightDefault,
            ':after': {
                content: '""',
                borderRadius: 'inherit',
                position: 'absolute',
                inset: '0px',
                boxSizing: 'border-box',
                border: `${apollo_core.Border.BorderThickS} solid var(--color-error-text)`,
                pointerEvents: 'none'
            }
        }
    }));
const LoadingSpinner = styled(CircularProgress)({
    width: `${apollo_core.Spacing.SpacingM} !important`,
    height: `${apollo_core.Spacing.SpacingM} !important`,
    color: 'inherit'
});
const ApChip = /*#__PURE__*/ react.forwardRef(({ loading, disabled, tooltip, debugForceOpen = false, error, label, onDelete, ...restProps }, ref)=>{
    const shouldDisable = disabled || loading;
    const deleteIcon = loading ? /*#__PURE__*/ jsx(LoadingSpinner, {}) : onDelete ? /*#__PURE__*/ jsx(Close, {
        fontSize: "small"
    }) : void 0;
    const chip = /*#__PURE__*/ jsx(StyledChip, {
        ref: ref,
        label: label,
        deleteIcon: deleteIcon,
        onDelete: onDelete,
        disabled: shouldDisable,
        error: error,
        loading: loading,
        ...shouldDisable && {
            tabIndex: -1
        },
        ...restProps
    });
    if (tooltip && tooltip.length > 0) return /*#__PURE__*/ jsx(Tooltip, {
        title: tooltip,
        placement: "top",
        open: debugForceOpen ? true : void 0,
        arrow: true,
        children: /*#__PURE__*/ jsx("span", {
            children: chip
        })
    });
    return chip;
});
ApChip.displayName = 'ApChip';
export { ApChip };
