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";
import { EventContext } from "../../../../contexts/Events/EventContext";
import { useNavigate } from "react-router";

type DeleteEventBtnProps = {
    id: string | number;
};

export default function DeleteEventBtn({ id }: DeleteEventBtnProps) {
    const { eventInfo } = useContext(EventDetailContext) as any;
    const { removeEvent } = useContext(EventContext) as any;

    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>
        </>
    );
}