import {type ReactElement} from 'react'

import {VirtualList} from '@/components/ui/virtual-list'
import {
  usePagedListScreen,
  type PagedListResource,
} from '@/hooks/use-paged-list-screen'

// a full-screen paged list backed by a global store: the mount load, paging,
// pull-to-refresh and loading/empty/error gates all derive from the resource,
// so a tab screen is just its resource + row
export function PagedVirtualListScreen<T extends {id: string}>({
  resource,
  renderItem,
  emptyMessage,
}: {
  resource: PagedListResource<T>
  renderItem: (item: T) => ReactElement | null
  emptyMessage: string
}) {
  const {
    items,
    loading,
    loadingMore,
    reachedEnd,
    error,
    retry,
    screenProps,
  } = usePagedListScreen(resource)
  return (
    <VirtualList
      items={items}
      renderItem={renderItem}
      emptyMessage={emptyMessage}
      loading={loading}
      loadingMore={loadingMore}
      reachedEnd={reachedEnd}
      error={error}
      onRetry={retry}
      onEndReached={screenProps.onEndReached}
      onRefresh={screenProps.onRefresh}
    />
  )
}
