import { useContext } from "react";
import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
import { EventDetailContext } from "../../../../contexts/eventDetail/eventDetail.js";
import Button from "../../../../components/ui/button/button.tsx";
import { useState } from "react";
import Modal from "../../../../components/ui/modal/modal.tsx";
import styles from "../../eventDetail.module.css";

export default function DeleteTaskBtn({ taskId, eventId, taskName }) {

    const { user } = useContext(AuthContext)
    const { deleteTask } = useContext(EventDetailContext)

    const [openModal, setOpenModal] = useState(false);

    if(!user?.isAdmin) return null;

    return <>
        <Button variant={"danger"} onClick={() => setOpenModal(true)}> Supprimer </Button>

        <Modal open={openModal} onClose={setOpenModal} title={"Suppression"}>
            <div className={styles.modalContent}>
                <p className={styles.modalContent}>Etes-vous sur de vouloir supprimer la tâche {taskName} ? </p>
                <Button variant={"danger"} onClick={() => { deleteTask(taskId, eventId); setOpenModal(false) }}> Confirmer </Button>
            </div>
        </Modal>
    </>
}