import classNames from 'classnames';
import useId from "../utilities/useId";
import { CloseIcon, CloseIconThin } from "../Icons";
import { t } from "../i18n";
import { jsx as _jsx, jsxs as _jsxs } from "preact/compat/jsx-runtime";
const 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 const FilterChip = _ref => {
  let {
    ariaClearLabel,
    className,
    label,
    id,
    onDelete,
    size,
    useAlternateIcon
  } = _ref;
  const filterChipId = useId('filter-chip--', id);
  function handleClick() {
    onDelete();
  }
  function handleKeyDown(evt) {
    if (actionableKeys.includes(evt.key)) {
      handleClick();
      evt.preventDefault();
    }
  }
  const buttonClassNames = classNames('ds-c-filter-chip__button', size && size === 'big' ? 'ds-c-filter-chip__button--big' : '', className);
  const iconContainerClassNames = classNames('ds-c-filter-chip__clear-icon-container', useAlternateIcon ? 'ds-c-filter-chip__clear-icon-alternate-container' : '');
  return /*#__PURE__*/_jsxs("button", {
    id: filterChipId,
    className: buttonClassNames,
    onClick: handleClick,
    onKeyDown: handleKeyDown,
    type: "button",
    children: [/*#__PURE__*/_jsx("span", {
      className: "ds-c-filter-chip__label",
      "aria-hidden": true,
      "aria-describedby": `${filterChipId}-instructions`,
      children: label
    }), /*#__PURE__*/_jsxs("span", {
      id: `${filterChipId}-instructions`,
      className: "ds-u-visibility--screen-reader",
      children: [ariaClearLabel ?? t('filterChip.ariaClearLabel'), " ", t('filterChip.filter', {
        label
      }), " ."]
    }), /*#__PURE__*/_jsx("span", {
      className: iconContainerClassNames,
      children: useAlternateIcon ? /*#__PURE__*/_jsx(CloseIconThin, {}) : /*#__PURE__*/_jsx(CloseIcon, {})
    })]
  });
};
export default FilterChip;