import React, { useEffect, useState } from 'react';
import classnames from 'classnames';
import { ListCard } from '../list-card';
import { Message, MESSAGE_TYPES } from '../message';
import { LoadingIcon } from '../loading-icon';
import SearchableListView from './searchable-list-view';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx } from "react/jsx-runtime";
export default function SearchableList({
  className,
  items,
  errorMessage,
  isLoading,
  pagination,
  availableSizes,
  ItemComponent = ListCard,
  searchValue = '',
  onSearch = () => {},
  header = null,
  total = 0,
  noItemsText,
  updatingResultsText,
  loadingText
}) {
  const [isInitialLoad, setIsInitialLoad] = useState(true);
  const {
    t
  } = useTranslation();
  useEffect(() => {
    if (!isLoading) {
      // set a flag, so we could show a correct loading message
      setIsInitialLoad(false);
    }
  }, [isLoading]);
  return /*#__PURE__*/_jsx(SearchableListView, {
    className: classnames('searchable-list', className, {
      loading: isLoading
    }),
    searchValue: searchValue,
    pagination: pagination,
    onSearch: onSearch,
    header: header,
    total: total,
    availableSizes: availableSizes,
    noDataElement: /*#__PURE__*/_jsx(Message, {
      type: errorMessage ? MESSAGE_TYPES.ERROR : MESSAGE_TYPES.INFO,
      testId: "searchable-list-no-data-message",
      isCentered: true,
      children: errorMessage || (noItemsText ?? t('No items to list'))
    }),
    fillContainer: isLoading && /*#__PURE__*/_jsx(LoadingIcon, {
      testId: "searchable-list-loading-icon",
      message: isInitialLoad ? loadingText ?? t('Loading...') : updatingResultsText ?? t('Updating list results...')
    }),
    children: items.map(item => /*#__PURE__*/React.createElement(ItemComponent, {
      ...item,
      key: item.id
    }))
  });
}