'use strict';

var React = require('react');
var classnames = require('classnames');
var Chip = require('./Chip-cjs.js');
var InternalChipDismissible = require('./InternalChipDismissible-cjs.js');
var Icon = require('./Icon-cjs.js');

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

function InternalChipSingleSelect({ children, selected, name = React.useId(), showSelectedSuffix = true, onChange, onClick, }) {
    const { getSuffixProps } = useInternalChips();
    return (React.createElement("div", { className: Chip.styles$1.wrapper, "data-testid": "singleselect-chips" }, React.Children.map(children, child => {
        const isSelected = child.props.value === selected;
        const suffixProps = getSuffixProps(isSelected, showSelectedSuffix);
        const classes = classnames(Chip.styles$1.input, {
            [Chip.styles$1.disabled]: child.props.disabled,
            [Chip.styles$1.invalid]: child.props.invalid,
            [Chip.styles$1.inactive]: !isSelected,
        });
        return (React.createElement("label", null,
            React.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.createElement(InternalChipDismissible.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.createElement("div", { className: Chip.styles$1.wrapper, "data-testid": "multiselect-chips" }, React.Children.map(children, chip => {
        const isChipActive = isChipSelected(chip.props.value);
        const suffixProps = getSuffixProps(isChipActive, showSelectedSuffix);
        const classes = classnames(Chip.styles$1.input, {
            [Chip.styles$1.disabled]: chip.props.disabled,
            [Chip.styles$1.invalid]: chip.props.invalid,
            [Chip.styles$1.inactive]: !isChipActive,
        });
        return (React.createElement("label", null,
            React.createElement("input", { type: "checkbox", checked: isChipActive, className: classes, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
            React.createElement(InternalChipDismissible.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);
    }
}

/* eslint-disable import/no-deprecated */
function Chips(props) {
    switch (props.type) {
        case "dismissible":
            return React.createElement(InternalChipDismissible.InternalChipDismissible, Object.assign({}, props));
        case "multiselect":
            return React.createElement(InternalChipMultiSelect, Object.assign({}, props));
        default:
            return React.createElement(InternalChipSingleSelect, Object.assign({}, props));
    }
}

exports.Chips = Chips;
