import React, { useMemo } from "react";

import MuiTablePagination, {
  TablePaginationProps as MuiTablePaginationProps,
} from "@mui/material/TablePagination";

import { useTableContext } from "../../contexts/TableContext";

export interface TablePaginationProps
  extends Omit<MuiTablePaginationProps, "rowsPerPage" | "count" | "page" | "onPageChange"> {}

export const TablePagination: React.FC<TablePaginationProps> = (props) => {
  const { count, page, changePage, rowsPerPage, rowsPerPageOptions, changeRowsPerPage } =
    useTableContext();

  const defaultProps = useMemo<MuiTablePaginationProps>(
    () => ({
      rowsPerPageOptions,
      count,
      page,
      onPageChange: changePage,
      rowsPerPage,
      onRowsPerPageChange: changeRowsPerPage,
      sx: {
        borderBottom: "none",
        fontVariationSettings: { sm: '"wdth" 100', xs: '"wdth" 75' },
      },
      ...props,
    }),
    [rowsPerPageOptions, count, page, changePage, rowsPerPage, changeRowsPerPage, props],
  );

  return <MuiTablePagination {...defaultProps} />;
};

export default TablePagination;