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 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 {Link} from 'react-router-dom';
import 'react-toastify/dist/ReactToastify.css';
import { toast } from 'react-toastify';
import { ToastContainer } from 'react-toastify';


export default function DeleteBike() {

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


        const successAlert = () => {
        toast.success("Bike has been deleted successfully!", {
            position: "top-center",
            autoClose: 2000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: false,
            draggable: true,
            progress: undefined,    
        });
    }

            const failureAlert = () => {
        toast.error("Unsuccessful delete", {
            position: "top-center",
            autoClose: 2000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: false,
            draggable: true,
            progress: undefined,    
        });
    }



    useEffect(() => {
        axios.get(`/api/admin/bikes/${id}`, {
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('accessToken')
        }
    }).then((response) => {
            setBike(response.data);
        })
        .catch((error) => {
                setError(error.response.data.error ?? error.response.data.message ?? "There was a problem");
        });
    }, [id]);


    const deleteBike = () => {
        
        axios.delete(`/api/admin/bikes/${id}`, {
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('accessToken')
        }
    }).then((response) => {
            successAlert();
            navigate("/admin/bikes");
        })
        .catch((error) => {
                setError(error.response.data.error ?? error.response.data.message ?? "There was a problem");
                failureAlert();
        });

    }


  return (

        <div className='d-flex justify-content-center '>
                <span className="text-danger">{error}</span>
            <TableContainer
                className='mt-5 w-50 shadow bg-grey '
            >
                <h3 className='text-center mt-2'>Are you sure you want to delete this bike?</h3>

                <Table className='shadow-sm mb-3' sx={{ minWidth: 550 }} aria-label="simple table">
                    <TableHead className='shadow-sm'>
                        <TableRow>
                            <TableCell align="center"><h6>Serial Number:  {bike.serialNumber}  </h6></TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                            <TableRow
                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                            >
                                <TableCell align="center">
                                <Link to={"/admin/bikes"}><button className="btn btn-secondary green-btn m-2">Back to Bikes</button></Link>
 
                        {/* <Link to={"/admin/bikes"}><Button
                        className="bg-secondary text-white m-2 align-middle">
                        Back to bike list
                    </Button></Link> */}
                    <span> </span><Button className="bg-danger text-white" onClick={() => { deleteBike(id) }}>Delete</Button></TableCell>
                     <ToastContainer />
                            </TableRow>
                    </TableBody>
                </Table>

            </TableContainer>
            </div>
            


  )
}

 