import Pagination from '@mui/material/Pagination';
import { setCurrentPage } from '@/redux/features/products-slice';
import { load } from '@/redux/features/products-slice'
import { useDispatch } from 'react-redux';
import { AppDispatch , useAppSelector } from '@/redux/store';

export default function ListPagination() {

    const dispatch = useDispatch<AppDispatch>();
    // load needed states
    const currentPage = useAppSelector((state) => state.productsReducer.value.currentPage)
    const total = useAppSelector((state) => state.productsReducer.value.total)
    // handle the pagination
    const handlePagination = (event: React.ChangeEvent<unknown>, value: number) => {
        dispatch(load({page:value}));
        dispatch(setCurrentPage(value));
    };
    // show the pagination ui
    return (
        <>
            {Math.ceil(total / 4) > 1 ? (
                <div className="flex justify-center items-center py-12">
                    <Pagination
                        sx={{ direction: 'ltr' }}
                        count={Math.ceil(total / 4)}
                        page={currentPage}
                        onChange={handlePagination}
                        variant="outlined"
                        shape="rounded"
                    />
                </div>
            ) : (
                <></>
            )}
        </>
    );
}