import { useGetCoinsCountQuery } from '../coinApi';
import { useNavigate } from "react-router-dom";

import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Typography from '@mui/material/Typography';


const Pager = (props:any): JSX.Element => {

    console.log("page props", props)

    const { page, per_page, } = props;

    const { data, error, isLoading, isSuccess, refetch } = useGetCoinsCountQuery();
    const navigate = useNavigate();

    const lastPage = Math.ceil(data / per_page)

    function handlePager(page: number) {
        const url = `/?page=${page}`
        navigate(url)
    }

    return (
        <ButtonGroup variant="contained" aria-label="outlined primary button group">
            <Button disabled={page === 1} onClick={() => navigate("/")}>First</Button>
            <Button disabled={page === 1} onClick={() => handlePager(page - 1)}>Prev</Button>
            <Typography style={{ padding: 10}}>Page {page} from {lastPage}</Typography>
            <Button disabled={page === lastPage} onClick={() => handlePager(page + 1)}>Next</Button>
            <Button disabled={page === lastPage} onClick={() => handlePager(lastPage)}>Last</Button>
        </ButtonGroup>
    )
}
  
export default Pager;