import React from "preact/compat";
import classNames from 'classnames';
import useId from "../utilities/useId";
import { CloseIcon, CloseIconThin } from "../Icons";
import { t } from "../i18n";
var actionableKeys = ['Enter', 'Space', 'Backspace', 'Delete'];
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/filter-chip/).
 */
export var FilterChip = function FilterChip(_ref) {
  var ariaClearLabel = _ref.ariaClearLabel,
    className = _ref.className,
    label = _ref.label,
    id = _ref.id,
    onDelete = _ref.onDelete,
    size = _ref.size,
    useAlternateIcon = _ref.useAlternateIcon;
  var filterChipId = useId('filter-chip--', id);
  function handleClick() {
    onDelete();
  }
  function handleKeyDown(evt) {
    if (actionableKeys.includes(evt.key)) {
      handleClick();
      evt.preventDefault();
    }
  }
  var buttonClassNames = classNames('ds-c-filter-chip__button', size && size === 'big' ? 'ds-c-filter-chip__button--big' : '', className);
  var iconContainerClassNames = classNames('ds-c-filter-chip__clear-icon-container', useAlternateIcon ? 'ds-c-filter-chip__clear-icon-alternate-container' : '');
  return /*#__PURE__*/React.createElement("button", {
    id: filterChipId,
    className: buttonClassNames,
    onClick: handleClick,
    onKeyDown: handleKeyDown,
    type: "button"
  }, /*#__PURE__*/React.createElement("span", {
    className: "ds-c-filter-chip__label",
    "aria-hidden": true,
    "aria-describedby": "".concat(filterChipId, "-instructions")
  }, label), /*#__PURE__*/React.createElement("span", {
    id: "".concat(filterChipId, "-instructions"),
    className: "ds-u-visibility--screen-reader"
  }, ariaClearLabel !== null && ariaClearLabel !== void 0 ? ariaClearLabel : t('filterChip.ariaClearLabel'), " ", t('filterChip.filter', {
    label: label
  }), " ."), /*#__PURE__*/React.createElement("span", {
    className: iconContainerClassNames
  }, useAlternateIcon ? /*#__PURE__*/React.createElement(CloseIconThin, null) : /*#__PURE__*/React.createElement(CloseIcon, null)));
};
export default FilterChip;