import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from "react-redux";
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 { fetchPendingRequestsAction } from "../../state/actions/request-actions";
import Loading from "../../loading/loading";


export const AdminPage = props => {

    // state data
    const loading = useSelector(state => state.requests.loading);
    const pendingRequests = useSelector(state => state.requests.pendingRequests);
    const dispatch = useDispatch();

    useEffect(() => {
         dispatch(fetchPendingRequestsAction());
         console.log(pendingRequests);
        // eslint-disable-next-line
    }, []);

    // pagination stuff
    const [page, setPage] = useState(0);
    const [rowsPerPage, setRowsPerPage] = useState(5);

    const emptyRows = rowsPerPage - Math.min(rowsPerPage, pendingRequests.length - page * rowsPerPage);

    const handleChangePage = (event, newPage) => setPage(newPage);

    const handleChangeRowsPerPage = event => {
        setRowsPerPage(parseInt(event.target.value, 10));
        setPage(0);
    };

    const showRequests = (
       <TableContainer component={Paper} className={`shadow-md`}>
           <Table>
               <TableHead className={`bg-gray-200`}>
                   <TableRow>
                       <TableCell><span className={`font-bold`}>worker</span></TableCell>
                       <TableCell><span className={`font-bold`}>action</span></TableCell>
                       <TableCell><span className={`font-bold`}>admin</span></TableCell>
                       <TableCell><span className={`font-bold`}>requestor</span></TableCell>
                       <TableCell><span className={`font-bold`}>name</span></TableCell>
                       <TableCell><span className={`font-bold`}>task_id</span></TableCell>
                       <TableCell><span className={`font-bold`}>path</span></TableCell>
                       <TableCell><span className={`font-bold`}>table_name</span></TableCell>
                   </TableRow>
               </TableHead>
               <TableBody>

                   {
                       (rowsPerPage > 0
                           ? pendingRequests.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                           : pendingRequests).map(request => (
                           <TableRow key={request.id} component={Link} to={`request-details/${request.id}`} className={`hover:bg-gray-200`}>
                               <TableCell>{ request.worker }</TableCell>
                               <TableCell>{ request.action }</TableCell>
                               <TableCell>{ request.admin }</TableCell>
                               <TableCell>{ request.requestor }</TableCell>
                               <TableCell>{ request.name }</TableCell>
                               <TableCell>{ request.task_id }</TableCell>
                               <TableCell>{ request.path }</TableCell>
                               <TableCell>{ request.table_name }</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={3}
                           count={pendingRequests.length}
                           rowsPerPage={rowsPerPage}
                           page={page}
                           SelectProps={{
                               inputProps: { 'aria-label': 'rows per page' },
                               native: true,
                           }}
                           onChangePage={handleChangePage}
                           onChangeRowsPerPage={handleChangeRowsPerPage}
                           ActionsComponent={TablePaginationActions}
                       />
                   </TableRow>
               </TableFooter>

           </Table>
       </TableContainer>
    );

    if(loading || !pendingRequests.length) return (<Loading />);

    return (
        <div className="">
            { showRequests }
        </div>
    );

};