import React from 'react';
import { Search } from '../search';
import { ActionBar, ACTION_BAR_TRAY_ITEM_PLACEMENT } from '../action-bar';
import { PaginationControls } from '../pagination';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SearchableListHeader = ({
  availableSizes = [20, 50, 100],
  searchValue,
  header = '',
  pagination,
  onSearch,
  total
}) => {
  const actionItemsList = [{
    element: header && /*#__PURE__*/_jsx("header", {
      className: "searchable-list-header",
      "test-id": "searchable-list-header",
      children: header
    })
  }, {
    element: /*#__PURE__*/_jsx(PaginationControls, {
      onPageSizeChange: pagination.setPageSize,
      currentPage: pagination.currentPage,
      onPageChange: pagination.setPage,
      availableSizes: availableSizes,
      pageSize: pagination.pageSize,
      total: total
    }),
    placement: ACTION_BAR_TRAY_ITEM_PLACEMENT.RIGHT
  }];
  return /*#__PURE__*/_jsxs("div", {
    className: "searchable-list-header-container",
    children: [/*#__PURE__*/_jsx("div", {
      className: "searchable-list-controls-wrapper",
      children: /*#__PURE__*/_jsx(Search, {
        onChange: onSearch,
        value: searchValue,
        id: "list-search-field"
      })
    }), /*#__PURE__*/_jsx(ActionBar, {
      actionItemsList: actionItemsList
    })]
  });
};
export default SearchableListHeader;