import {useEffect, useContext} from "react";
import styles from "./EventDetailPage.module.css";
import {useParams} from "react-router";
import {formatDateLetter} from "../../utils/date/formatDateLetter.js";
import EventTask from "./components/EventTask/EventTask.jsx";
import {AuthContext} from "../../contexts/Auth/AuthContext.js";
import {EventDetailContext} from "../../contexts/EventDetail/EventDetailContext.js";
import CreateTaskBtn from "./components/CreateTaskBtn/CreateTaskBtn.jsx";
import DeleteEventBtn from "./components/DeleteEventBtn/DeleteEventBtn.jsx";


function EventDetailPage() {

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

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


    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}>
                                <DeleteEventBtn id={id}/>
                                <CreateTaskBtn id={id}/>
                            </div>}
                        </div>
                    </div>
                </div>

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

export default EventDetailPage;