import React from 'react';
import { SearchableListLayout, SelectedItemsBoard } from './index';
import { SearchableList } from '../searchable-list';
import { TruncateWithTooltip } from '../truncate-with-tooltip';
import { useTranslation } from '../hooks/use-translation';
import { TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { jsx as _jsx } from "react/jsx-runtime";
const MultiselectSearchableList = ({
  onSelectToggle,
  selectedItems = [],
  errorMessage,
  searchQuery,
  onClearAll,
  pagination,
  isLoading,
  onSearch,
  header,
  availableSizes,
  items = [],
  total,
  noItemsMessage,
  selectedItemsMessage = () => undefined,
  itemNameKey = 'catalogName',
  clearAllText,
  removeText
}) => {
  const {
    t
  } = useTranslation();
  const getSelectedItemsMessageDefault = itemsLength => itemsLength === 1 ? t('{{itemsLength}} item selected', {
    itemsLength
  }) : t('{{itemsLength}} items selected', {
    itemsLength
  });
  const selectedItemsMessageFn = selectedItemsMessage || getSelectedItemsMessageDefault;
  return /*#__PURE__*/_jsx("div", {
    className: "multiselect-items-list",
    "test-id": "multiselect-items-list",
    children: /*#__PURE__*/_jsx(SearchableListLayout, {
      aside: /*#__PURE__*/_jsx(SelectedItemsBoard, {
        items: selectedItems,
        displayLabel: item => /*#__PURE__*/_jsx(TruncateWithTooltip, {
          tooltipPlacement: TOOLTIP_PLACEMENT_TYPES.BOTTOM,
          children: /*#__PURE__*/_jsx("span", {
            children: item[itemNameKey]
          })
        }),
        listKey: ({
          id
        }) => id,
        header: selectedItemsMessageFn(selectedItems.length),
        onItemRemove: onSelectToggle,
        onClearAll: onClearAll,
        clearAllText: clearAllText ?? t('Clear all'),
        removeText: removeText ?? t('Remove')
      }),
      children: /*#__PURE__*/_jsx(SearchableList, {
        errorMessage: errorMessage,
        noItemsText: noItemsMessage,
        isLoading: isLoading,
        searchValue: searchQuery,
        pagination: pagination,
        onSearch: onSearch,
        header: header,
        total: total,
        items: items,
        availableSizes: availableSizes
      })
    })
  });
};
export default MultiselectSearchableList;