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 DeletePromo() {

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

    const successAlert = () => {
        toast.success("Promo 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/coupons/${id}`, {
            headers: {
                Authorization: 'Bearer ' + localStorage.getItem('accessToken')
            }
        }).then((response) => {
            console.log(response.data)
            setPromo(response.data);
        })
            .catch((error) => {
                if (error.response.data.message) {
                    setError(error.response.data.message);
                }
            });
    }, [id]);


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

    return (
        <div className='d-flex justify-content-center'>
            <div className="card mt-5">
                <h1 className="card-header">Delete Promo: {promo.id}</h1>
                <div className="card-body">
                    <h5 className="card-title">Are you sure you want to delete this Promo?</h5>
                    <ul>
                        <li>Name: {promo.title}</li>
                        <li>StripeID: {promo.stripeCouponId}</li>
                        <li>Expiration: {promo.expirationDate}</li>
                    </ul>
                    <Link to={"/admin/promos"}>
                        <Button
                            className="bg-primary text-white m-2 align-middle">
                            Back to Promos
                        </Button>
                    </Link>
                    <Button
                        className="bg-danger text-white"
                        onClick={() => {
                            deletePromo(id)
                        }}
                    >
                        Delete
                    </Button>
                </div>
            </div>
        </div>
    )
}

