import React from 'react';
import uniqueId from 'lodash-es/uniqueId';
import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { BUTTON_TYPES } from '../button';
import FilterItem from './filter-item';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/** Component for listing all currently enabled filters */
export function ActiveFiltersList({
  filters,
  onClearAll,
  showIcon = true,
  onClearOne,
  testId = '',
  filterByText,
  clearAllText,
  deleteFilterItemText
}) {
  const {
    t
  } = useTranslation();
  if (!filters || !filters.length) {
    return null;
  }
  return /*#__PURE__*/_jsxs("div", {
    className: "active-filters-list",
    "test-id": testId,
    children: [showIcon && /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: faFilter,
      "aria-label": filterByText ?? t('Filter By'),
      "aria-hidden": "false"
    }), /*#__PURE__*/_jsx("div", {
      className: "filters-container",
      role: "list",
      children: filters.map(filter => /*#__PURE__*/_jsx(FilterItem, {
        id: filter.key || uniqueId(),
        filter: filter,
        onClearOne: onClearOne,
        deleteFilterItemText: deleteFilterItemText ?? t('Delete filter item')
      }, filter.key || uniqueId()))
    }), onClearAll ? /*#__PURE__*/_jsx("button", {
      onClick: onClearAll,
      className: "filters-clear button command",
      "test-id": "active-filter-list-clear-all",
      type: BUTTON_TYPES.BUTTON,
      children: clearAllText ?? t('Clear all')
    }) : null]
  });
}