import React, { useState } from 'react';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
import { useTranslation } from '../hooks/use-translation';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { Button, ACCENT_TYPES } from '../button';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function SelectedItemsBoard({
  displayLabel,
  onItemRemove,
  onClearAll,
  listKey,
  header,
  items,
  getDefaultHeaderText,
  clearAllText,
  removeText
}) {
  const {
    t
  } = useTranslation();
  const [isExpanded, toggleExpanded] = useState(true);
  const getSelectedItemsMessageDefault = itemsLength => itemsLength === 1 ? t('{{itemsLength}} item selected', {
    itemsLength
  }) : t('{{itemsLength}} items selected', {
    itemsLength
  });

  // not in default props because it depends on items length
  const headerContent = header || getDefaultHeaderText?.(items.length) || getSelectedItemsMessageDefault(items.length);
  return /*#__PURE__*/_jsxs("div", {
    className: "selected-items-board",
    children: [/*#__PURE__*/_jsx("header", {
      className: "underlined",
      children: /*#__PURE__*/_jsx(Button, {
        onClick: () => toggleExpanded(!isExpanded),
        testId: "selected-items-board-expand-toggler",
        accentType: ACCENT_TYPES.COMMAND,
        rightIcon: isExpanded ? faChevronDown : faChevronUp,
        children: /*#__PURE__*/_jsx("span", {
          children: headerContent
        })
      })
    }), isExpanded && items.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx("ul", {
        className: "items-list",
        children: items.map((item, index) => /*#__PURE__*/_jsxs("li", {
          className: "item-container",
          "test-id": "selected-items-board-item-label",
          children: [/*#__PURE__*/_jsx("div", {
            className: "item-display-label",
            "test-id": item?.testId,
            children: displayLabel(item, index)
          }), /*#__PURE__*/_jsx(Button, {
            testId: "selected-items-board-remove-item-btn",
            onClick: () => onItemRemove(item, index),
            accentType: ACCENT_TYPES.ROUND_ICON,
            className: "item-remove-button",
            "aria-label": removeText,
            children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
              icon: faCircleXmark
            })
          })]
        }, listKey(item, index)))
      }), /*#__PURE__*/_jsx("div", {
        className: "underlined clear-all-button-wrapper",
        children: /*#__PURE__*/_jsx(Button, {
          testId: "selected-items-board-clear-all-btn",
          accentType: ACCENT_TYPES.COMMAND,
          onClick: onClearAll,
          children: clearAllText
        })
      })]
    })]
  });
}