import axios from "axios";
import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from "react";
import { useParams } from 'react-router-dom';
import React from 'react'
import Button from '@mui/material/Button';
import {Link} from 'react-router-dom';
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';


export default function DeleteBike() {

    let navigate = useNavigate();
    let { id } = useParams();
    const [rental, setRental] = useState({});
    const [error, setError] = useState('');

    useEffect(() => {
        axios.get(`/api/admin/rentals/${id}`, {
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('accessToken')
        }
    }).then((response) => {
            setRental(response.data);
        })
        .catch((error) => {
            if(error.response.data.message) {
                setError(error.response.data.message);
            }
        });
    }, [id]);

    const deleteRental= () => {


        axios.delete(`/api/admin/rentals/${id}`, {
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('accessToken')
        }
    }).then((response) => {
            navigate("/admin/rentals");
        })
        .catch((error) => {
            if(error.response.data.message) {
                setError(error.response.data.message);
            }
        });

    }


  return (

        <div className='d-flex justify-content-center bg-grey '>
            <span className="text-danger">{error}</span>
            <TableContainer
                className='mt-5 w-75 shadow'
            >
                <h3 className='text-center mt-2'>Are you sure you want to delete this Rental?</h3>
                <Table className='shadow-sm mb-3' sx={{ minWidth: 550 }} aria-label="simple table">
                    <TableHead className='shadow-sm'>
                        <TableRow>
                            <TableCell align="center"><h6>with  id:  {rental.id} </h6></TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                            <TableRow
                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                            >
                                <TableCell align="center"> <Link to={"/admin/rentals"}><Button
                        className="bg-primary text-white m-2 align-middle">
                        Back to rental list
                    </Button></Link><span> </span><Button className="bg-danger text-white" onClick={() => { deleteRental(id) }}>Delete</Button></TableCell>
                            </TableRow>
                    </TableBody>
                </Table>

            </TableContainer>
            </div>
            


  )
}

 