import React__default, { useId } from 'react';
import classnames from 'classnames';
import { a as styles } from './Chip-es.js';
import { a as InternalChip, I as InternalChipDismissible } from './InternalChipDismissible-es.js';
import { I as Icon } from './Icon-es.js';

const getSuffixProps = (isChipActive, showSelectedSuffix) => {
    if (isChipActive) {
        return showSelectedSuffix
            ? {
                suffix: (React__default.createElement(Icon, { size: "small", name: "checkmark", color: "interactiveSubtle" })),
            }
            : {};
    }
    return {};
};
function useInternalChips() {
    return {
        getSuffixProps,
    };
}

function InternalChipSingleSelect({ children, selected, name = useId(), showSelectedSuffix = true, onChange, onClick, }) {
    const { getSuffixProps } = useInternalChips();
    return (React__default.createElement("div", { className: styles.wrapper, "data-testid": "singleselect-chips" }, React__default.Children.map(children, child => {
        const isSelected = child.props.value === selected;
        const suffixProps = getSuffixProps(isSelected, showSelectedSuffix);
        const classes = classnames(styles.input, {
            [styles.disabled]: child.props.disabled,
            [styles.invalid]: child.props.invalid,
            [styles.inactive]: !isSelected,
        });
        return (React__default.createElement("label", null,
            React__default.createElement("input", { type: "radio", checked: isSelected, className: classes, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: () => {
                    /* No op. onClick handles the change to allow deselecting. */
                }, disabled: child.props.disabled }),
            React__default.createElement(InternalChip, Object.assign({}, child.props, suffixProps, { active: isSelected, tabIndex: -1 }))));
    })));
    function handleKeyUp(active, value) {
        if (!active)
            return;
        return (event) => {
            if (event.key === " ") {
                // Wait for DOM changes before applying the new change.
                setTimeout(() => handleChange(value), 0);
            }
        };
    }
    function handleClick(value) {
        return (event) => {
            onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
            handleChange(value);
        };
    }
    function handleChange(value) {
        const newValue = value !== selected ? value : undefined;
        onChange(newValue);
    }
}

function InternalChipMultiSelect({ children, selected, showSelectedSuffix = true, onChange, onClick, }) {
    const { getSuffixProps } = useInternalChips();
    return (React__default.createElement("div", { className: styles.wrapper, "data-testid": "multiselect-chips" }, React__default.Children.map(children, chip => {
        const isChipActive = isChipSelected(chip.props.value);
        const suffixProps = getSuffixProps(isChipActive, showSelectedSuffix);
        const classes = classnames(styles.input, {
            [styles.disabled]: chip.props.disabled,
            [styles.invalid]: chip.props.invalid,
            [styles.inactive]: !isChipActive,
        });
        return (React__default.createElement("label", null,
            React__default.createElement("input", { type: "checkbox", checked: isChipActive, className: classes, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
            React__default.createElement(InternalChip, Object.assign({}, chip.props, { active: isChipActive }, suffixProps, { tabIndex: -1 }))));
    })));
    function isChipSelected(value) {
        return selected.includes(value);
    }
    function handleClick(value) {
        return (event) => onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
    }
    function handleChange(value) {
        return () => {
            if (isChipSelected(value)) {
                handleDeselect(value);
            }
            else {
                handleSelect(value);
            }
        };
    }
    function handleSelect(value) {
        const newVal = [...selected, value];
        onChange(newVal);
    }
    function handleDeselect(value) {
        const values = selected;
        const newVal = values.filter(val => val !== value);
        onChange(newVal);
    }
}

function Chips(props) {
    switch (props.type) {
        case "dismissible":
            return React__default.createElement(InternalChipDismissible, Object.assign({}, props));
        case "multiselect":
            return React__default.createElement(InternalChipMultiSelect, Object.assign({}, props));
        default:
            return React__default.createElement(InternalChipSingleSelect, Object.assign({}, props));
    }
}

export { Chips as C };
