import React, { useEffect, useRef } from 'react';
import classnames from 'classnames';
import SearchableListHeader from './searchable-list-header';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function SearchableListView({
  className,
  noDataElement,
  fillContainer,
  searchValue = '',
  pagination,
  onSearch = () => {},
  children,
  header,
  total = 0,
  availableSizes
}) {
  const listRef = useRef(null);
  useEffect(() => {
    if (listRef.current) {
      listRef.current.scrollTop = 0;
    }
  }, [pagination.currentPage, searchValue]);
  const shouldShowNoDataElement = (!children || Array.isArray(children) && children.length === 0) && !fillContainer;
  return /*#__PURE__*/_jsxs("div", {
    className: classnames('searchable-list-view', className),
    children: [/*#__PURE__*/_jsx(SearchableListHeader, {
      availableSizes: availableSizes,
      searchValue: searchValue,
      pagination: pagination,
      onSearch: onSearch,
      header: header,
      total: total
    }), /*#__PURE__*/_jsxs("div", {
      className: "searchable-list-content",
      children: [/*#__PURE__*/_jsxs("div", {
        className: "searchable-list-items-container",
        "test-id": "searchable-list-items-container",
        ref: listRef,
        children: [children, shouldShowNoDataElement && noDataElement]
      }), fillContainer]
    })]
  });
}