'use client';

import * as React from 'react';
import TablePagination from '@mui/material/TablePagination';

function noop(): void {
  return undefined;
}

interface LessonTypesPaginationProps {
  count: number;
  page: number;
  rowsPerPage: number;
  setRowsPerPage: React.Dispatch<React.SetStateAction<number>>;
  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
}

export function LessonTypesPagination({
  count,
  page,
  rowsPerPage,
  setRowsPerPage,
  setCurrentPage,
}: LessonTypesPaginationProps): React.JSX.Element {
  // You should implement the pagination using a similar logic as the filters.
  // Note that when page change, you should keep the filter search params.

  function handleRowsPerPageChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void {
    console.log(e.target.value);
    console.log(parseInt(e.target.value));
    setRowsPerPage(parseInt(e.target.value));
  }

  function handlePageChange(e: React.MouseEvent<HTMLButtonElement> | null): void {
    // console.log(e.target.value);
    // console.log(parseInt(e.target.value));
    // setCurrentPage(parseInt(e.target.value));
  }

  return (
    <TablePagination
      component="div"
      count={count}
      page={page}
      //
      rowsPerPage={rowsPerPage}
      rowsPerPageOptions={[5, 10, 25]}
      //
      onPageChange={(e) => {
        handlePageChange(e);
      }}
      onRowsPerPageChange={(e) => {
        handleRowsPerPageChange(e);
      }}
    />
  );
}
