import { useContext, useState } from "react";
import { AuthContext } from "../../../../contexts/Auth/AuthContext";
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
import Button from "../../../../components/ui/Button/Button";
import Modal from "../../../../components/ui/Modal/Modal";
import styles from "../../EventDetailPage.module.css";

type DeleteTaskBtnProps = {
    taskId: string | number;
    eventId: string | number;
    taskName: string;
};

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

    const { user } = useContext(AuthContext) as any;
    const { deleteTask } = useContext(EventDetailContext) as any;

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

    if (!user?.isAdmin) return null;

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

            <Modal open={openModal} onClose={() => setOpenModal(false)} 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>
        </>
    );
}