import { useState } from "react";
import { useLocalData } from "../context/useLocalData";
import { AthleteList, ActiviteList, CoachList, SessionList} from "./ressourceList";
import { Activite, Athlete, Coach , Session } from "../classes";

export default function RessourcePanel() {
    const { user } = useLocalData();
    const [showAthletes, setShowAthletes] = useState(false);
    const [showActivites, setShowActivites] = useState(false);
    const [showCoachs,setShowCoachs] = useState(false);
    const [showSessions, setShowSessions] = useState(false);
    console.log("Rôle utilisateur:", user.role);
    if (user.role === "Athlete") return null;


    const athleteMap: Map<number, Athlete> = new Map();
    user.sessions.forEach(session => {
        session.athletes?.forEach(a => athleteMap.set(a.id, a));
    });
    const allAthletes: Athlete[] = Array.from(athleteMap.values());

    const activiteMap: Map<number, Activite> = new Map();
    user.sessions.forEach(session => {
        session.activites?.forEach(act => activiteMap.set(act.id, act));
    });
    const allActivites: Activite[] = Array.from(activiteMap.values());

    const coachMap: Map<number, Coach> = new Map();
    user.sessions.forEach(session => {
        if (session.coach) {
            coachMap.set(session.coach.id, session.coach);
        }
    });

    const allCoachs: Coach[] = Array.from(coachMap.values());

    const sessionMap: Map<number, Session> = new Map();
    user.sessions.forEach(session => {
        sessionMap.set(session.id, session);
    });

    const allSessions: Session[] = Array.from(sessionMap.values());

    function onAthletesClick(): void {
        setShowAthletes(prev => !prev);
        setShowActivites(false); 
        setShowCoachs(false);
        setShowSessions(false);

    }
    function onActivitiesClick(): void {
        setShowActivites(prev => !prev);
        setShowAthletes(false);
        setShowCoachs(false);
        setShowSessions(false);


    }
    function onCoachClick(): void {
        setShowCoachs(prev => !prev);
        setShowActivites(false); 
        setShowAthletes(false);
        setShowSessions(false);

    }

    function onSessionClick(): void {
        setShowSessions(prev => !prev);
        setShowActivites(false); 
        setShowAthletes(false);
        setShowCoachs(false);

    }


    return (
        <div className="ressource_panel">
            <select
                onChange={(e) => {
                    const v = (e.target as HTMLSelectElement).value;
                    if (v === "athletes") onAthletesClick();
                    else if (v === "activites") onActivitiesClick();
                    else if (v === "coach") onCoachClick();
                    else if (v === "session") onSessionClick();
                    else {setShowAthletes(false); setShowActivites(false); setShowCoachs(false); setShowSessions(false)}
                }}>
                <option value="athletes">Athlètes</option>
                <option value="activites">Activités</option>
                {user.role === "Admin" && <option value="coach"> Coach</option>}
                <option value="session"> Session</option>
            </select>

            {showAthletes && (
                <div className="edt_athletes_panel">
                    <h3>Liste des athlètes</h3>
                    <AthleteList athletes={allAthletes} />
                </div>
            )}

            {showActivites && (
                <div className="edt_activites_panel">
                    <h3>Liste des activités</h3>
                    <ActiviteList activites={allActivites} />
                </div>
            )}

            {showCoachs && (
                <div className="edt_coachs_panel">
                    <h3>Liste des coachs</h3>
                    <CoachList coachs={allCoachs} />
                </div>
            )}

            {showSessions && (
                <div className="edt_sessions_panel">
                    <h3>Liste des sessions</h3>
                    <SessionList sessions={allSessions} />
                </div>
            )}



        </div>
    );
}