import React from 'react';
import PropTypes from 'prop-types';
import {
  TablePagination,
  TableRow,
  TableFooter
} from '@mui/material';
import TablePaginationActions from './TablePaginationActions';

const Pagination = ({ dataLength, page, setPage, setRowsPerPage, rowsPerPage }) => {
  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  return (
    <TableFooter>
      <TableRow>
        <TablePagination
          rowsPerPageOptions={[5, 10, 25, 50, { label: 'All', value: -1 }]}
          colSpan={6}
          count={dataLength}
          rowsPerPage={rowsPerPage}
          page={page}
          SelectProps={{
            inputprops: {
              'aria-label': 'rows per page',
            },
            native: true,
          }}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
          ActionsComponent={TablePaginationActions}
        />
      </TableRow>
    </TableFooter>
  )
}

export default Pagination;

Pagination.propTypes = {
  dataLength: PropTypes.number.isRequired,
  page: PropTypes.number.isRequired,
  setPage: PropTypes.func.isRequired,
  rowsPerPage: PropTypes.number.isRequired,
  setRowsPerPage: PropTypes.func.isRequired,
};