import { useState } from "react";
import { useLocalData } from "../context/useLocalData";
import ListButton from "./dropdownButton";
import { AthleteList, ActiviteList } from "./ressourceList";
import { Activite, Athlete } from "../classes";

export default function RessourcePanel() {
    const { user } = useLocalData();
    const [showAthletes, setShowAthletes] = useState(false);
    const [showActivites, setShowActivites] = useState(false);


    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());

    return (
        <div className="ressource_panel">
            <ListButton 
                onAthletesClick={() => {
                    setShowAthletes(prev => !prev);
                    setShowActivites(false); 
                }}
                onActivitiesClick={() => {
                    setShowActivites(prev => !prev);
                    setShowAthletes(false);
                }}
            />
            {showAthletes && (
                <div className="edt_athletes_panel">
                    <h3>Liste des athlètes</h3>
                    <AthleteList athletes={allAthletes} activites={[]}/>
                </div>
            )}
            {showActivites && (
                <div className="edt_activites_panel">
                    <h3>Liste des activités</h3>
                    <ActiviteList athletes={[]} activites={allActivites} />
                </div>
            )}
            
        </div>
    );
}