import React from 'react';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
//MUI
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import TablePagination from '@mui/material/TablePagination';
import Button from '@mui/material/Button';
import 'react-toastify/dist/ReactToastify.css';
import { toast } from 'react-toastify';

export default function MaintenanceHistory() {
    const [listOfMaintenance, setListOfMaintenance,] = useState([]);
    let navigate = useNavigate();



    useEffect(() => {
        axios.get(`/api/admin/maintenance/history`, {
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('accessToken')
        }
    }).then((response) => {
            console.log(response.data)
            setListOfMaintenance(response.data);
        });
    }, []);

    // const updateTable = () => {
    //     axios.get(`/api/admin/maintenance`, {
    //     headers: {
    //         Authorization: 'Bearer ' + localStorage.getItem('accessToken')
    //     }
    // }).then((response) => {
    //         setListOfMaintenance(response.data);
    //     });
    // }




    function createData(id, maintenanceDate, maintainedBikeId ,maintenanceBikeSerialNumber) {
        return { id, maintenanceDate, maintainedBikeId, maintenanceBikeSerialNumber };
    }

    const rows = listOfMaintenance.map((value) => (
        createData(value.id, value.maintenanceDate, (value.maintainedBike ? value.maintainedBike.id : "Not Found"  ) , (value.maintainedBike ? value.maintainedBike.serialNumber : "Not Found"  ))
    ))

    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(5);


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

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

    return (
        <div className='d-flex justify-content-center bg-grey '>
            <TableContainer
                className='mt-5 w-75 shadow'
                component={Paper}
            >
                <h1 className='text-center mt-2'>Maintenance History</h1>
                <Table className='shadow-sm mb-3' sx={{ minWidth: 850 }} aria-label="simple table">
                    <TableHead className='shadow-sm'>
                        <TableRow>
                            <TableCell align="right">ID</TableCell>
                            <TableCell align="right">Maintenance Date</TableCell>
                            <TableCell align="right">Maintained Bike ID </TableCell>
                            <TableCell align="right">Maintained Bike Serial Number</TableCell>
                            
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => (
                            <TableRow
                                key={row.id}
                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                            >
                                <TableCell align="right">{row.id}</TableCell>
                                <TableCell align="right">{row.maintenanceDate}</TableCell>
                                <TableCell align="right">{row.maintainedBikeId}</TableCell>
                                <TableCell align="right">{row.maintenanceBikeSerialNumber}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
                <div className='d-flex flex-wrap justify-content-between'>
                    <TablePagination
                        rowsPerPageOptions={[5, 10, 25]}
                        component="div"
                        count={rows.length}
                        rowsPerPage={rowsPerPage}
                        page={page}
                        onPageChange={handleChangePage}
                        onRowsPerPageChange={handleChangeRowsPerPage}
                    ></TablePagination>
                </div>
            </TableContainer>
        </div>

    )
}