"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _search = require("../search");
var _actionBar = require("../action-bar");
var _pagination = require("../pagination");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const SearchableListHeader = ({
  availableSizes = [20, 50, 100],
  searchValue,
  header = '',
  pagination,
  onSearch,
  total
}) => {
  const actionItemsList = [{
    element: header && /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
      className: "searchable-list-header",
      "test-id": "searchable-list-header",
      children: header
    })
  }, {
    element: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pagination.PaginationControls, {
      onPageSizeChange: pagination.setPageSize,
      currentPage: pagination.currentPage,
      onPageChange: pagination.setPage,
      availableSizes: availableSizes,
      pageSize: pagination.pageSize,
      total: total
    }),
    placement: _actionBar.ACTION_BAR_TRAY_ITEM_PLACEMENT.RIGHT
  }];
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "searchable-list-header-container",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "searchable-list-controls-wrapper",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_search.Search, {
        onChange: onSearch,
        value: searchValue,
        id: "list-search-field"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_actionBar.ActionBar, {
      actionItemsList: actionItemsList
    })]
  });
};
var _default = exports.default = SearchableListHeader;