import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default from 'react';
import { TextChip } from '../TextFieldChip/TextFieldChip.styles.js';
import { StyledChips } from '../../TextField.styles.js';
import { classes } from '../../TextField.tokens.js';
import { StyledChip } from './TextFieldChipNew.styles.js';

var TextFieldChipNew = function TextFieldChipNew(_ref) {
  var chips = _ref.chips,
    onChipCloseClick = _ref.onChipCloseClick,
    getRef = _ref.getRef,
    handleChipKeyDown = _ref.handleChipKeyDown,
    onChipClear = _ref.onChipClear,
    readOnly = _ref.readOnly,
    chipType = _ref.chipType,
    view = _ref.view,
    _ref$chipClickArea = _ref.chipClickArea,
    chipClickArea = _ref$chipClickArea === void 0 ? 'full' : _ref$chipClickArea,
    _forceChipManipulationWithReadonly = _ref._forceChipManipulationWithReadonly;
  return /*#__PURE__*/React__default.createElement(StyledChips, {
    className: classes.chipsWrapper
  }, chips.map(function (_ref2, index) {
    var value = _ref2.value,
      label = _ref2.label,
      disabled = _ref2.disabled;
    var chipId = "".concat(index, "_").concat(value);
    var handleChipClick = function handleChipClick(event) {
      event.stopPropagation();
    };
    var onKeyDownHandle = function onKeyDownHandle(event) {
      if (handleChipKeyDown) {
        handleChipKeyDown(event, chipId, index);
      }
      if (event.key === 'Enter' || event.key === 'Backspace') {
        if (onChipCloseClick) {
          onChipCloseClick({
            value: value,
            label: label,
            disabled: disabled
          });
        }
      }
    };
    var handleCloseClick = function handleCloseClick(event) {
      event.stopPropagation();
      if (onChipCloseClick) {
        onChipCloseClick({
          value: value,
          label: label,
          disabled: disabled
        });
      }
      if (onChipClear) {
        onChipClear(chipId, index);
      }
    };
    return chipType === 'default' ? /*#__PURE__*/React__default.createElement(StyledChip, _extends({
      key: chipId,
      ref: function ref(element) {
        return getRef(element, index);
      },
      tabIndex: -1,
      disabled: disabled,
      hasClear: !disabled,
      readOnly: readOnly,
      onKeyDown: onKeyDownHandle,
      onClear: function onClear() {
        return onChipClear(chipId, index);
      },
      text: label,
      view: view,
      chipClickArea: chipClickArea
    }, chipClickArea === 'full' ? {
      onClick: handleCloseClick
    } : {
      onClick: handleChipClick,
      onClickClose: handleCloseClick
    }, {
      // TODO: #1547
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
    })) : /*#__PURE__*/React__default.createElement(TextChip, {
      tabIndex: -1,
      onClick: handleCloseClick,
      onKeyDown: onKeyDownHandle
    }, label);
  }));
};

export { TextFieldChipNew };
