'use strict';

var tslib_es6 = require('./tslib.es6-cjs.js');
var React = require('react');
var classnames = require('classnames');
var jobberHooks = require('@jobber/hooks');
var Avatar = require('./Avatar-cjs.js');
var Icon = require('./Icon-cjs.js');
var useChildComponent = require('./useChildComponent-cjs.js');
var Typography = require('./Typography-cjs.js');
var Tooltip = require('./Tooltip-cjs.js');

var styles$1 = {"chip":"FJNLweTKlm4-","clickableSuffix":"VI-h7qe-Bl0-","suffix":"OufFSBZ4gLc-","prefix":"cmAqSkFDPFA-","empty":"CWJcbOmNtsY-","chipBar":"oV7kqacWv-U-","selected":"NO1-MLiNi0g-","base":"_5cCHfc5LzqY-","invalid":"CMvHum0PGzY-","subtle":"ln-ky9jFiLI-","disabled":"_3uJEejbZvig-","chipContent":"fLGluRRWPSk-","truncateGradient":"H3-SjXQhoS4-","chipLabelRef":"rYoQfOpWeMk-","spinning":"DDVRXFECqIo-"};

function ChipPrefix({ children }) {
    const avatarOrIcon = useChildComponent.useChildComponent(children, d => d.type === Avatar.Avatar || d.type === Icon.Icon);
    if (!avatarOrIcon)
        return React.createElement(React.Fragment, null, children);
    return React.createElement("span", { className: classnames(styles$1.prefix) }, avatarOrIcon);
}

var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp8oIxJ0-","invalid":"H7VZzUBkgjk-","disabled":"-yQxZSnxBBU-","button":"ngKOY8l4BG4-","icon":"rzbiB2nz36Q-","spinning":"X7Bx5CDPfDs-"};

function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
    const buttonRef = React.useRef(null);
    return (React.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": disabled, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
        React.createElement(Icon.Icon, { size: "small", name: icon, color: getColor() })));
    function handleKeyUp(event) {
        var _a;
        if (document.activeElement === buttonRef.current &&
            (event.key === " " || event.key === "Enter")) {
            event.stopPropagation();
            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
        }
    }
    function handleKeyDown(event) {
        if (document.activeElement === buttonRef.current && event.key === " ") {
            // Don't scroll down
            event.preventDefault();
        }
    }
    function getColor() {
        if (disabled)
            return "disabled";
        if (invalid)
            return "critical";
        return "interactiveSubtle";
    }
    function handleClick(event) {
        event.stopPropagation();
        onClick === null || onClick === void 0 ? void 0 : onClick(event);
    }
}

function ChipSuffix({ children, className, onClick, testID, ariaLabel, }) {
    const singleChild = useChildComponent.useChildComponent(children, d => d.type === Icon.Icon || d.type == InternalChipButton);
    const handleClick = (event) => {
        if (!onClick) {
            return;
        }
        event.preventDefault();
        event.stopPropagation();
        onClick(event);
    };
    return (React.createElement("span", { className: classnames(onClick ? styles$1.clickableSuffix : styles$1.suffix, className, !singleChild && styles$1.empty), onClick: handleClick, onKeyPress: handleClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "data-testid": testID, "aria-label": ariaLabel }, singleChild));
}

const ChipComponent = React.forwardRef((_a, ref) => {
    var { ariaLabel, "aria-label": ariaLabelProp, disabled, heading, invalid, label, value, testID, onClick, onClickValue, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", className, style, onFocus, onBlur, onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, onContextMenu, title, "data-testid": dataTestId } = _a, rest = tslib_es6.__rest(_a, ["ariaLabel", "aria-label", "disabled", "heading", "invalid", "label", "value", "testID", "onClick", "onClickValue", "onKeyDown", "children", "role", "tabIndex", "variation", "className", "style", "onFocus", "onBlur", "onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseDown", "onMouseUp", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd", "onContextMenu", "title", "data-testid"]);
    const classes = classnames(styles$1.chip, {
        [styles$1.invalid]: invalid,
        [styles$1.base]: variation === "base",
        [styles$1.subtle]: variation === "subtle",
        [styles$1.disabled]: disabled,
    }, className);
    const prefix = useChildComponent.useChildComponent(children, d => d.type === ChipPrefix);
    const suffix = useChildComponent.useChildComponent(children, d => d.type === ChipSuffix);
    const [labelRef, labelFullyVisible] = jobberHooks.useInView();
    const [headingRef, headingFullyVisible] = jobberHooks.useInView();
    const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
    const chipContent = (React.createElement(React.Fragment, null,
        prefix,
        React.createElement("div", { className: styles$1.chipContent },
            heading && (React.createElement(React.Fragment, null,
                React.createElement(Typography.Typography, { size: "base", fontWeight: "medium" },
                    heading,
                    React.createElement("span", { ref: headingRef, className: styles$1.chipLabelRef })),
                label && React.createElement("span", { className: styles$1.chipBar }))),
            React.createElement(Typography.Typography, { size: "base" },
                label,
                React.createElement("span", { ref: labelRef, className: styles$1.chipLabelRef })),
            !labelFullyVisible && (React.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
                React.createElement("span", null)))),
        suffix));
    const isClickable = Boolean(onClick || onClickValue);
    const handleClick = (ev) => {
        onClick === null || onClick === void 0 ? void 0 : onClick(ev);
        onClickValue === null || onClickValue === void 0 ? void 0 : onClickValue(value, ev);
    };
    return (React.createElement(Tooltip.Tooltip, { message: tooltipMessage, setTabIndex: false }, isClickable
        ? React.createElement("button", Object.assign(Object.assign({}, rest), { className: classes, style, onClick: handleClick, tabIndex: disabled ? -1 : tabIndex, onKeyDown,
            onFocus,
            onBlur,
            onPointerDown,
            onPointerUp,
            onPointerEnter,
            onPointerLeave,
            onMouseDown,
            onMouseUp,
            onMouseEnter,
            onMouseLeave,
            onTouchStart,
            onTouchEnd,
            onContextMenu, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, disabled,
            role, "data-testid": testID !== null && testID !== void 0 ? testID : dataTestId, title, type: "button", ref }), chipContent)
        : React.createElement("div", Object.assign(Object.assign({}, rest), { className: classes, style, tabIndex: disabled ? -1 : tabIndex, onKeyDown,
            onFocus,
            onBlur,
            onPointerDown,
            onPointerUp,
            onPointerEnter,
            onPointerLeave,
            onMouseDown,
            onMouseUp,
            onMouseEnter,
            onMouseLeave,
            onTouchStart,
            onTouchEnd,
            onContextMenu, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, role, "data-testid": testID !== null && testID !== void 0 ? testID : dataTestId, title,
            ref }), chipContent)));
});
function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
    let message = "";
    if (heading && !headingFullyVisible) {
        message = `${heading} | ${label}`;
    }
    else if (!labelFullyVisible) {
        message = label;
    }
    return message;
}
ChipComponent.displayName = "Chip";
const Chip = Object.assign(ChipComponent, {
    Prefix: ChipPrefix,
    Suffix: ChipSuffix,
});

exports.Chip = Chip;
exports.InternalChipButton = InternalChipButton;
exports.styles = styles$1;
exports.styles$1 = styles;
