/*import { useMemo } from "react";
import styles from "./eventList.module.css";
import EventItem from "./eventItem.jsx";
import { EventContext } from "../../../../contexts/events/EventContext.js";
import { useContext } from "react";

function EventList() {
    // Utilise une valeur par défaut pour `events` si elle est `undefined`
    const { events = [] } = useContext(EventContext);

    const sortedEvents = useMemo(() => {
        // Vérifie explicitement que `events` est un tableau avant de trier
        if (!Array.isArray(events)) return [];
        return [...events].sort(
            (a, b) => new Date(a.start) - new Date(b.start)
        );
    }, [events]);

    return (
        <div className={`${styles.glassCard} glassCard`}>
            <h2>Liste des événements à venir</h2>
            {sortedEvents.length > 0 ? (
                <div className={styles.eventList}>
                    {sortedEvents.map((eventGroup, index) => (
                        <EventItem eventGroup={eventGroup} key={index} />
                    ))}
                </div>
            ) : (
                <p>Aucun événement planifié pour l'instant.</p>
            )}
        </div>
    );
}

export default EventList;*/
import { useMemo, useContext } from "react";
import styles from "./EventList.module.css";
import EventItem from "./EventItem";
import { EventContext } from "../../../../contexts/Events/EventContext";

type Task = {
  name: string;
  description: string;
  start: string | Date;
  end: string | Date;
};

type EventGroup = {
  date: string;
  name: string;
  start: string | Date;
  tasks: Task[];
};

type EventContextType = {
  events?: EventGroup[];
};

function EventList() {
  const { events = [] } = useContext(EventContext) as EventContextType;

  const sortedEvents = useMemo<EventGroup[]>(() => {
    if (!Array.isArray(events)) return [];

    return [...events].sort(
      (a, b) =>
        new Date(a.start).getTime() - new Date(b.start).getTime()
    );
  }, [events]);

  return (
    <div className={`${styles.glassCard} glassCard`}>
      <h2>Liste des événements à venir</h2>

      {sortedEvents.length > 0 ? (
        <div className={styles.eventList}>
          {sortedEvents.map((eventGroup, index) => (
            <EventItem eventGroup={eventGroup} key={index} />
          ))}
        </div>
      ) : (
        <p>Aucun événement planifié pour l'instant.</p>
      )}
    </div>
  );
}

export default EventList;