import React from 'react';
import { usePagingContext } from './context';
import { TNavSize } from './index';

export interface IPagingContentNav {
  navSize?: TNavSize;
  [x: string]: any;
}

export default function PagingContentNav(props: IPagingContentNav) {
  const { navSize, ...otherProps } = props;
  const { dataSource, pageSize, pageNumber, setPageNumber, onPageChange } = usePagingContext();

  if (!dataSource || !dataSource.length) {
    return null;
  }

  let pageNumbers = [];
  for (let i = 1; i <= Math.ceil(dataSource.length / pageSize); i++) {
    pageNumbers.push(i);
  }

  const handlePageClick = (pageNumber: number) => {
    setPageNumber(pageNumber);
    if (onPageChange) onPageChange(pageNumber);
  };

  if (pageNumbers.length <= 1) {
    return null;
  }
  let renderPageNumbers = pageNumbers.map((number) => {
    return (
      <li key={number} className={`b-page-item ${number == pageNumber ? 'active' : ''}`}>
        <button type="button" className="b-page-link" onClick={() => handlePageClick(number)}>
          {number}
        </button>
      </li>
    );
  });

  return (
    <ul className={`b-paging ${navSize}`} {...otherProps}>
      {renderPageNumbers}
    </ul>
  );
}