// Organism (utilizes Table component which is a molecule, but is not strictly tied to a single feature)

/**
 * The goal of this component is to:
 * - render the table data
 * - handle initial API call + any additional page and/or search related API calls
 * - render table header & footer with pagination and actions
 */
const PageableTable = ({
  columns,
  components,
  data,
  filters,
  hasError,
  isLoading,
  onFetchData,
  onRowClick,
  pagination,
  tableProps: tablePropsBase,
  title,
}) => {
  const { values: params } = useFormState();

  // Joined Table props
  const tableProps = { ...tablePropsBase, columns, data, onRowClick };

  const emptyResults = hasEmptyResults({ data, isLoading });
  const emptySearchResults = hasEmptySearchResults({ data, isLoading, params });

  // We are setting isSearching to true if we are in a loading state and the value
  // for the search Query exists
  const isSearching = isLoading && Boolean(params.searchKey);

  // Props shared between all of the PageableTable child components
  const commonProps = { isLoading, isSearching };

  const handleRefresh = () => {
    onFetchData({ page: pagination.currentPage, params });
  };

  const handleFetchPreviousPage = () => {
    if (pagination.hasPreviousPage) {
      onFetchData({ page: pagination.currentPage - 1, params });
    }
  };

  const handleFetchNextPage = () => {
    if (pagination.hasNextPage) {
      onFetchData({ page: pagination.currentPage + 1, params });
    }
  };

  return (
    <div className="pageable-table">
      <TableActionbar
        {...commonProps}
        filters={filters}
        hasError={hasError}
        onGoToNextPage={handleFetchNextPage}
        onGoToPreviousPage={handleFetchPreviousPage}
        onRefresh={handleRefresh}
        pagination={pagination}
        title={title}
      />
      <PageableTableBody
        {...commonProps}
        {...tableProps}
        components={components}
        hasEmptyResults={emptyResults}
        hasEmptySearchResults={emptySearchResults}
        hasError={hasError}
        onRefresh={handleRefresh}
        params={params}
      />
      <TableFooter
        {...commonProps}
        hasError={hasError}
        onGoToNextPage={handleFetchNextPage}
        onGoToPreviousPage={handleFetchPreviousPage}
        pagination={pagination}
      />
    </div>
  );
};