'use strict';

var clsx = require('clsx');
var reactIntl = require('react-intl');
var Chip = require('./Chip.js');
var Chips_messages = require('./Chips.messages.js');
var jsxRuntime = require('react/jsx-runtime');

const Chips = ({
  chips,
  onChange,
  selected,
  'aria-label': ariaLabel,
  className,
  multiple
}) => {
  const intl = reactIntl.useIntl();
  const isSelected = value => Array.isArray(selected) ? selected.includes(value) : selected === value;
  const handleOnChange = (selectedValue, isCurrentlyEnabled) => {
    onChange({
      isEnabled: !isCurrentlyEnabled,
      selectedValue
    });
  };
  return /*#__PURE__*/jsxRuntime.jsx("div", {
    className: clsx.clsx('np-chips d-flex', className),
    "aria-label": ariaLabel,
    role: !multiple ? 'radiogroup' : 'group',
    children: chips.map(chip => {
      const chipSelected = isSelected(chip.value);
      return /*#__PURE__*/jsxRuntime.jsx(Chip, {
        role: !multiple ? 'radio' : 'checkbox',
        "aria-checked": chipSelected,
        value: chip.value,
        label: chip.label,
        closeButton: {
          'aria-label': intl.formatMessage(Chips_messages.ariaLabel, {
            choice: chip.label
          })
        },
        className: clsx.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);
    })
  });
};

module.exports = Chips;
//# sourceMappingURL=Chips.js.map
