import {useState, useEffect, useContext} from "react";
import styles from "./eventDetail.module.css";
import {useParams} from "react-router";
import {formatDateLetter} from "../../utils/date/formatDateLetter.js";
import EventTask from "./components/EventTask/EventTask.jsx";
import Button from "../../components/ui/button/button.jsx";
import Modal from "../../components/ui/modal/modal.jsx";
import { AuthContext } from "../../contexts/auth/AuthContext.js";
import { EventContext } from "../../contexts/events/EventContext.js";
import { EventDetailContext } from "../../contexts/eventDetail/eventDetail.js";
import {useNavigate} from "react-router";
import CreateTaskBtn from "./components/createTaskBtn/createTaskBtn.jsx";


function EventDetail() {

    const params = useParams();
    const id = params.id;
    const { user } = useContext(AuthContext)
    const { removeEvent } = useContext(EventContext)
    const { tasks, updateEventInfo, eventInfo } = useContext(EventDetailContext)
    const navigate = useNavigate();

    const [open, setOpen] = useState(false);

    useEffect(() => {
        updateEventInfo(id);
    }, [])

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

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

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


    return (
            <div className={styles.allContent}>
                <div className={`glassCard`}>
                    <div className={styles.textImage}>
                        <img src="/icons/theme/dark.svg" alt="Illustration événement" className={styles.eventImage}/>
                        <div className={styles.eventInfo}>
                            <h2>{eventInfo?.name}</h2>
                            <div className={styles.eventContent}>
                                <div>
                                    <p>{eventInfo && formatDateLetter(eventInfo.start)}</p>
                                    <p>{eventInfo?.description}</p>
                                </div>
                                {user?.isAdmin && <div className={styles.manageEvent}>
                                    <Button variant={"danger"} className={styles.manageBtn}
                                            onClick={handleDelete}>Supprimer</Button>
                                    <CreateTaskBtn id={id}/>
                                </div>}
                            </div>
                        </div>
                    </div>

                    <h2>Tâches</h2>
                    <div className={styles.tasks}>
                        {tasks?.map((task, index) => (
                            <EventTask task={task} key={index}/>
                        ))}
                    </div>
                </div>

                <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>


            </div>
    );
}

export default EventDetail;