import styles from "../../EventDetailPage.module.css";
import Button from "../../../../components/ui/Button/Button";
import Modal from "../../../../components/ui/Modal/Modal";
import { useContext, useState } from "react";
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext.js";
import { EventContext } from "../../../../contexts/Events/EventContext.js";
import { useNavigate } from "react-router";

export default function DeleteEventBtn({ id }) {

    const { eventInfo } = useContext(EventDetailContext)
    const { removeEvent } = useContext(EventContext)
    const [open, setOpen] = useState(false);
    const navigate = useNavigate();

    const handleDelete = () => {
        setOpen(true);
    }

    const delEvent = async () => {
        const result = await removeEvent(id);

        if (result.status === 200 || result.status === 204) {
            setOpen(false);
            navigate("/events");
        }
    }

    return <>

        <Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>

        <Modal open={open} onClose={() => setOpen(false)} title={"Suppression"}>
            <div className={styles.modalContent}>
                <p>Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?</p>

                <Button variant={"default"} onClick={delEvent}>Confirmer</Button>
            </div>
        </Modal>

    </>
}