import Pagination from 'react-bootstrap/Pagination';
import { useHistory } from 'react-router-dom';

function PaginationComponent(props) {
  const { page, pageCount } = props;
  const history = useHistory();

  const paginationClicked = event =>
    history.push(`${history.location.pathname}?page=${event.target.text}`);

  if (pageCount < 2) return null;

  return (
    <Pagination className='justify-content-center'>
      {page > 3 && <Pagination.Item onClick={paginationClicked}>{1}</Pagination.Item>}
      {page > 4 && <Pagination.Ellipsis />}
      {page > 2 && <Pagination.Item onClick={paginationClicked}>{page - 2}</Pagination.Item>}
      {page > 1 && <Pagination.Item onClick={paginationClicked}>{page - 1}</Pagination.Item>}
      <Pagination.Item active onClick={paginationClicked}>
        {page}
      </Pagination.Item>
      {page < pageCount && (
        <Pagination.Item onClick={paginationClicked}>{page + 1}</Pagination.Item>
      )}
      {page < pageCount - 1 && (
        <Pagination.Item onClick={paginationClicked}>{page + 2}</Pagination.Item>
      )}
      {page < pageCount - 3 && <Pagination.Ellipsis />}
      {page < pageCount - 2 && (
        <Pagination.Item onClick={paginationClicked}>{pageCount}</Pagination.Item>
      )}
    </Pagination>
  );
}

export default PaginationComponent;
