import { FC, ReactElement } from 'react';
import { InfiniteQueryObserverBaseResult } from 'react-query';

import InfiniteList from 'src/components/list/InfiniteList';

export type ThreadInfiniteListProps = {
  isSuccess: boolean;
  isEmpty: boolean;
  noResultsLabel?: string;
  hasNextPage: boolean;
  renderSkeleton?: ReactElement;
  isLoading: boolean;
  listWrapperProps: Pick<
    InfiniteQueryObserverBaseResult<unknown, unknown>,
    'hasNextPage' | 'fetchNextPage' | 'isFetchingNextPage'
  >;
};

export const ThreadInfiniteList: FC<
  React.PropsWithChildren<ThreadInfiniteListProps>
> = props => {
  const {
    isSuccess,
    isEmpty,
    isLoading,
    noResultsLabel,
    hasNextPage,
    listWrapperProps,
    renderSkeleton,
    children,
  } = props;

  return (
    <InfiniteList
      isSuccess={isSuccess}
      isEmpty={isEmpty}
      noResultsLabel={noResultsLabel}
      hasNextPage={hasNextPage}
      sx={{
        mt: 1,
        position: 'relative',
        zIndex: 0,
      }}
      renderSkeleton={renderSkeleton}
      loadingSkeleton={isLoading}
      isLoading={isLoading}
      {...listWrapperProps}
    >
      {children}
    </InfiniteList>
  );
};

export default ThreadInfiniteList;