import { object } from 'prop-types';
import React from 'react';
import { usePaginationContext } from './PaginationContainer';
import Icon from '../Icon';
import { Text } from '../Text';
import Button from '../Button';
import { Shelf } from '../Layout';

const PAGE_START_INDEX = 1;

const Pagination = ({ pagination: paginationProp }) => {
  const paginationCtx = usePaginationContext();
  const { pageCount, page, gotoPage, canPreviousPage, canNextPage } =
    paginationProp || paginationCtx;

  function handleChangePage(n) {
    if (n >= PAGE_START_INDEX && n <= pageCount && n !== page) {
      gotoPage(n);
    }
  }

  return (
    <Shelf gap="xsmall">
      <Text>
        <Text fontWeight="bold">{page}</Text> of {pageCount}
      </Text>
      <Button
        icon={<Icon name="chevron-left" size={16} />}
        size="narrow"
        appearance="secondary"
        onClick={() => handleChangePage(page - 1)}
        disabled={!canPreviousPage}
        aria-label="previous"
      />
      <Button
        icon={<Icon name="chevron-right" size={16} />}
        size="narrow"
        appearance="secondary"
        onClick={() => handleChangePage(page + 1)}
        disabled={!canNextPage}
        aria-label="next"
      />
    </Shelf>
  );
};

Pagination.propTypes = {
  pagination: object,
};

export default Pagination;