import React, { Fragment } from 'react';
import { usePagingContext } from './context';
import { TRenderItem } from './index';

export interface IPagingContent {
  renderItem: TRenderItem;
}

export default function PagingContent(props: IPagingContent) {
  const { dataSource, pageSize, pageNumber } = usePagingContext();
  if (!props.renderItem) {
    console.error('<Paging /> requires a renderItem prop');
  }
  let indexOfLastItem = pageNumber * pageSize;
  let indexOfFirstItem = indexOfLastItem - pageSize;
  let currentItems = dataSource.slice(indexOfFirstItem, indexOfLastItem);
  return <Fragment>{currentItems.map(props.renderItem)}</Fragment>;
}