import React from 'react';
import { PagingProvider } from './context';
import PagingContent, { IPagingContent } from './PagingContent';
import PagingContentNav, { IPagingContentNav } from './PagingContentNav';

export type TRenderItem = (value: any, index?: number) => React.ReactNode;
export type TNavSize = 'sm' | 'lg';

export interface IPaging {
  children: React.ReactNode;
  dataSource: any[];
  defaultPage?: number;
  pageSize: number;
  className?: string;
  onPageChange?(pageNumber: number): void;
}

interface IPagingSubComponents {
  Content?: React.FC<IPagingContent>;
  Nav?: React.FC<IPagingContentNav>;
}

export const Paging: React.FC<IPaging> & IPagingSubComponents = (props) => {
  const { children, dataSource = [], defaultPage, onPageChange, pageSize = 10 } = props;
  if (!dataSource || !dataSource.length) {
    return null;
  }
  return (
    <PagingProvider dataSource={dataSource} pageSize={pageSize} defaultPage={defaultPage} onPageChange={onPageChange}>
      {children}
    </PagingProvider>
  );
};

Paging.Content = PagingContent;
Paging.Nav = PagingContentNav;