import { FC } from 'react';

import ArrowBack from '@material-hu/icons/material/ArrowBack';
import ArrowForward from '@material-hu/icons/material/ArrowForward';
import ButtonGroup from '@material-hu/mui/ButtonGroup';
import IconButton from '@material-hu/mui/IconButton';
import Typography from '@material-hu/mui/Typography';
import { useTheme } from '@material-hu/mui/styles';

export type PdfPaginatorProps = {
  setCurrentPage: (number) => void;
  currentPage: number;
  totalPages: number;
};

const PdfPaginator: FC<PdfPaginatorProps> = props => {
  const { currentPage, totalPages, setCurrentPage } = props;
  const theme = useTheme();

  const isLastPage = currentPage === totalPages;

  return (
    <ButtonGroup
      style={{ alignSelf: 'center', alignItems: 'center' }}
      aria-label="paginator"
    >
      <IconButton
        onClick={() => setCurrentPage(currentPage - 1)}
        disabled={currentPage === 1}
        sx={{ color: theme.palette.new.text.neutral.default }}
      >
        <ArrowBack />
      </IconButton>
      <Typography
        sx={{ color: theme.palette.new.text.neutral.default }}
      >{`${currentPage} / ${totalPages}`}</Typography>
      <IconButton
        onClick={() => setCurrentPage(currentPage + 1)}
        disabled={isLastPage}
        sx={{ color: theme.palette.new.text.neutral.default }}
      >
        <ArrowForward />
      </IconButton>
    </ButtonGroup>
  );
};

export default PdfPaginator;