pagination

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from "react-redux";
import { ThemeProvider } from '@material-ui/core'
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableBody from '@material-ui/core/TableBody';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import Paper from '@material-ui/core/Paper';
import TableFooter from "@material-ui/core/TableFooter";
import TablePagination from "@material-ui/core/TablePagination";
import { TablePaginationActions } from "./TablePaginationActions";
import Loading from "../../../loading/loading";
import classes from './maker-screen.module.css';
import { makerSubmitJobsListAction } from "../../../../store/actions/ocms-jobActions";
import { theme } from "../../../../utils/material-ui-table";

export const MakerScreen = props => {

    // store data
    const loading = useSelector(state => state.ocmsJobs.loading);
    const makerSearchResults = useSelector(state => state.ocmsJobs.makerSearchResults) || [];
    const errorFetchingData = useSelector(state => state.ocmsJobs.errorFetchingData);
    const errorSubmittingData = useSelector(state => state.ocmsJobs.errorSubmittingData);
    const { id } = useSelector(state => state.auth.userData);
    const isAuthenticated = useSelector(state => state.auth.isAuthenticated);

    const navigate = useNavigate();
    const dispatch = useDispatch();

    const goBack = () => navigate(-1);

    // pagination stuff
    let emptyRows;
    const [page, setPage] = useState(0);
    const [rowsPerPage, setRowsPerPage] = useState(5);
    const handleChangePage = (event, newPage) => setPage(newPage);
    const handleChangeRowsPerPage = event => {
        setRowsPerPage(parseInt(event.target.value, 10));
        setPage(0);
    };
    if(makerSearchResults.length) {
        emptyRows = rowsPerPage - Math.min(rowsPerPage, makerSearchResults.length - page * rowsPerPage);
        makerSearchResults.forEach((result, index) => result.id = (index + 1));  // add random IDs with UUID
    }

    // handle checkboxes
    const [selectedJobs, setSelectedJobs] = useState([]);

    const handlePriority = async (e, JOB) => {
        const { value } = e.target;
        if(value) {
            await JOB.priority = value;
        } else {
            JOB.priority = null;
        }
    };

    const toggleSelectedJob = JOB => {
        if(selectedJobs.map(j => j.id).includes(JOB.id)) {
            setSelectedJobs(selectedJobs.filter(job => job.id !== JOB.id));
        } else {
            setSelectedJobs([JOB, ...selectedJobs]);
        }
    };

    const submitJobsForReRun = async () => {
        if(!selectedJobs.length) return;
        await dispatch(makerSubmitJobsListAction({ id, jobs: [...Set(selectedJobs)] }));
        setSelectedJobs([]);
    };

    useEffect(() => {
        if(!isAuthenticated) {
            navigate(`/login`);
        }
    }, [isAuthenticated]);

    useEffect(() => {
        if(errorFetchingData) navigate('/error-fetching-data');
        if(errorSubmittingData) navigate('/error-submitting-data');
    }, [errorFetchingData, errorSubmittingData]);

    if(loading) return (<Loading />);

    if(makerSearchResults.length === 0) return (
        <div className="mx-auto my-4 py-4">
            <h1 className="font-weight-bold text-lg">No results</h1>
            <button onClick={ goBack } className="DBS_button_standard hover:bg-gray-400 mt-5">
                <span className={`text-gray-700`}>Go back</span>
            </button>
        </div>
    );

    const showJobs = (
        <TableContainer component={Paper} className={`shadow-md mt-5`}>
            <ThemeProvider theme={ theme }>
                <Table>
                    <TableHead className={`bg-gray-200`}>
                        <TableRow>
                            <TableCell><span className={`font-bold`}>ID</span></TableCell>
                            <TableCell>
                                <p className={`font-bold`}>Jobs To ReRun</p>
                                <input type="checkbox" onClick={ () => toggleSelectedJob(result) } />
                            </TableCell>
                            <TableCell><span className={`font-bold`}>Priority</span></TableCell>
                            <TableCell><span className={`font-bold`}>Re-run Status</span></TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>

                        {
                            (rowsPerPage > 0
                                ? makerSearchResults.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                                : makerSearchResults).map(result => (
                                <TableRow key={result.id} className={`hover:bg-gray-200 ${classes.row}`}>
                                    <TableCell>{ result.id }</TableCell>
                                    <TableCell>
                                        <input type="checkbox" onClick={ () => toggleSelectedJob(result) } />
                                    </TableCell>
                                    <TableCell>
                                        <input type="number"
                                               inputMode={`numeric`}
                                               pattern="[0-9]*"
                                               onChange={ (event) => handlePriority(event, result) }
                                               className={`bg-gray-300 focus:bg-white focus:border-purple-500`} />
                                    </TableCell>
                                    <TableCell> </TableCell>
                                </TableRow>
                            ))
                        }

                        {emptyRows > 0 && (
                            <TableRow style={{ height: 53 * emptyRows }}>
                                <TableCell colSpan={6} />
                            </TableRow>
                        )}
                    </TableBody>

                    <TableFooter>
                        <TableRow>
                            <TablePagination
                                rowsPerPageOptions={[5, 10, 20, { label: 'All', value: -1 }]}
                                colSpan={8}
                                count={makerSearchResults.length}
                                rowsPerPage={rowsPerPage}
                                page={page}
                                SelectProps={{
                                    inputProps: { 'aria-label': 'rows per page' },
                                    native: true,
                                }}
                                onChangePage={handleChangePage}
                                onChangeRowsPerPage={handleChangeRowsPerPage}
                                ActionsComponent={TablePaginationActions}
                            />
                        </TableRow>
                    </TableFooter>
                </Table>

            </ThemeProvider>
        </TableContainer>
    );


    return (
        <div className="">
            <button onClick={ goBack } className="hover:bg-gray-400 my-1">
                <span className={`text-gray-700`}>Go back</span>
            </button>
            { showJobs }
            <button onClick={ submitJobsForReRun }
                    style={{ background: '#ff3e3e', color: '#ffffff' }}
                    className="px-6 hover:bg-red-700 mt-4">
                Submit (To Checker for Approval)
            </button>
        </div>
    );

};