'use client';

import TablePagination from '@mui/material/TablePagination';
import {
  useGridApiContext,
  useGridSelector,
  gridPageCountSelector,
  gridPageSelector,
  gridPageSizeSelector,
  gridRowCountSelector,
} from '@mui/x-data-grid-premium';

function CustomPagination() {
  const apiRef = useGridApiContext();
  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
  const page = useGridSelector(apiRef, gridPageSelector);
  const pageSize = useGridSelector(apiRef, gridPageSizeSelector);
  const rowCount = useGridSelector(apiRef, gridRowCountSelector);

  const labelDisplayedRows = ({
    from,
    to,
    count,
  }: {
    from: number;
    to: number;
    count: number;
  }) => {
    const currentPage = page + 1;
    const displayCount = count === -1 ? `mais de ${to}` : count;
    return `${from}–${to} de ${displayCount} | Página ${currentPage} de ${pageCount}`;
  };

  return (
    <TablePagination
      component="div"
      count={rowCount}
      page={page}
      onPageChange={(event, newPage) => apiRef.current.setPage(newPage)}
      rowsPerPage={pageSize}
      onRowsPerPageChange={(event) =>
        apiRef.current.setPageSize(Number.parseInt(event.target.value, 10))
      }
      labelRowsPerPage="Pedidos por página:"
      labelDisplayedRows={labelDisplayedRows}
    />
  );
}

export default CustomPagination;
