import { clsx } from 'clsx';
import { useIntl } from 'react-intl';
import Chip from './Chip.mjs';
import messages from './Chips.messages.mjs';
import { jsx } from 'react/jsx-runtime';

const Chips = ({
  chips,
  onChange,
  selected,
  'aria-label': ariaLabel,
  className,
  multiple
}) => {
  const intl = useIntl();
  const isSelected = value => Array.isArray(selected) ? selected.includes(value) : selected === value;
  const handleOnChange = (selectedValue, isCurrentlyEnabled) => {
    onChange({
      isEnabled: !isCurrentlyEnabled,
      selectedValue
    });
  };
  return /*#__PURE__*/jsx("div", {
    className: clsx('np-chips d-flex', className),
    "aria-label": ariaLabel,
    role: !multiple ? 'radiogroup' : 'group',
    children: chips.map(chip => {
      const chipSelected = isSelected(chip.value);
      return /*#__PURE__*/jsx(Chip, {
        role: !multiple ? 'radio' : 'checkbox',
        "aria-checked": chipSelected,
        value: chip.value,
        label: chip.label,
        closeButton: {
          'aria-label': intl.formatMessage(messages.ariaLabel, {
            choice: chip.label
          })
        },
        className: clsx('text-xs-nowrap', {
          'np-chip--selected': chipSelected,
          'p-r-1': multiple && chipSelected
        }),
        ...(multiple && chipSelected ? {
          onRemove: () => handleOnChange(chip.value, chipSelected)
        } : {
          onClick: () => handleOnChange(chip.value, chipSelected),
          onKeyPress: () => handleOnChange(chip.value, chipSelected)
        })
      }, chip.value);
    })
  });
};

export { Chips as default };
//# sourceMappingURL=Chips.mjs.map
