import { FC } from 'react';
import { Controller } from 'react-hook-form';

import TablePagination from '@material-hu/mui/TablePagination';

import { useLokaliseTranslation } from 'src/utils/i18n';

export type PaginationControllerProps = {
  control: any;
  total: number;
  setPage: (param) => void;
  setLimit: (param) => void;
  limitOptions: number[];
};

const PaginationController: FC<PaginationControllerProps> = props => {
  const { control, total, setPage, setLimit, limitOptions } = props;
  const { t } = useLokaliseTranslation('files');
  return (
    <Controller
      control={control}
      name="pagination"
      render={({ field }) => (
        <TablePagination
          {...field}
          component="div"
          count={total}
          onPageChange={(event, page) => setPage(page)}
          onRowsPerPageChange={event =>
            setLimit(parseInt(event.target.value, 10))
          }
          labelRowsPerPage={t('PAGINATION_STRING')}
          page={field.value.page}
          rowsPerPage={field.value.limit}
          rowsPerPageOptions={limitOptions}
        />
      )}
    />
  );
};

export default PaginationController;
