import React__default, { useRef, forwardRef } from 'react';
import classnames from 'classnames';
import { useInView } from '@jobber/hooks';
import { A as Avatar } from './Avatar-es.js';
import { I as Icon } from './Icon-es.js';
import { u as useChildComponent } from './useChildComponent-es.js';
import { T as Typography } from './Typography-es.js';
import { T as Tooltip } from './Tooltip-es.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(children, d => d.type === Avatar || d.type === Icon);
    if (!avatarOrIcon)
        return React__default.createElement(React__default.Fragment, null, children);
    return React__default.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 = useRef(null);
    return (React__default.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__default.createElement(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(children, d => d.type === Icon || d.type == InternalChipButton);
    const handleClick = (event) => {
        if (!onClick) {
            return;
        }
        event.preventDefault();
        event.stopPropagation();
        onClick(event);
    };
    return (React__default.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 = forwardRef(({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }, ref) => {
    const classes = classnames(styles$1.chip, {
        [styles$1.invalid]: invalid,
        [styles$1.base]: variation === "base",
        [styles$1.subtle]: variation === "subtle",
        [styles$1.disabled]: disabled,
    });
    const prefix = useChildComponent(children, d => d.type === ChipPrefix);
    const suffix = useChildComponent(children, d => d.type === ChipSuffix);
    const [labelRef, labelFullyVisible] = useInView();
    const [headingRef, headingFullyVisible] = useInView();
    const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
    const chipContent = (React__default.createElement(React__default.Fragment, null,
        prefix,
        React__default.createElement("div", { className: styles$1.chipContent },
            heading && (React__default.createElement(React__default.Fragment, null,
                React__default.createElement(Typography, { size: "base", fontWeight: "medium" },
                    heading,
                    React__default.createElement("span", { ref: headingRef, className: styles$1.chipLabelRef })),
                label && React__default.createElement("span", { className: styles$1.chipBar }))),
            React__default.createElement(Typography, { size: "base" },
                label,
                React__default.createElement("span", { ref: labelRef, className: styles$1.chipLabelRef })),
            !labelFullyVisible && (React__default.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
                React__default.createElement("span", null)))),
        suffix));
    // Use createElement to properly handle the ref typing
    return (React__default.createElement(Tooltip, { message: tooltipMessage, setTabIndex: false }, onClick
        ? React__default.createElement("button", {
            className: classes,
            onClick: (ev) => onClick === null || onClick === void 0 ? void 0 : onClick(value, ev),
            tabIndex: disabled ? -1 : tabIndex,
            onKeyDown,
            "aria-label": ariaLabel,
            disabled,
            role,
            "data-testid": testID,
            type: "button",
            ref,
        }, chipContent)
        : React__default.createElement("div", {
            className: classes,
            tabIndex: disabled ? -1 : tabIndex,
            onKeyDown,
            "aria-label": ariaLabel,
            role,
            "data-testid": testID,
            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,
});

export { Chip as C, InternalChipButton as I, styles as a, styles$1 as s };
