import { Athlete, Activite, Coach, Session, Ligne } from "../classes";
import {calculTempsDeJeuParLigne} from "../utils/ligneUtils";


type AthleteListProps = { athletes: Athlete[] };
type ActiviteListProps = { activites: Activite[] };
type CoachListProps = { coachs: Coach[] };
type SessionListProps = { sessions: Session[]};
type LigneListProps = { lignes: Ligne[], tempsDeJeuParLigne: Map<number, number> };

function AthleteList({ athletes }: AthleteListProps) {
    return (
        <ul className="AthleteList">
            {athletes.map((athlete) => (
                <li key={athlete.id}>
                    <div><strong>Nom:</strong> {athlete.nom}</div>
                    <div><strong>Groupe:</strong> {athlete.groupe}</div>
                </li>
            ))}
        </ul>
    );
}

function ActiviteList({ activites }: ActiviteListProps) {
    return (
        <ul className="ActiviteList">
            {activites.map((activite) => (
                <li key={activite.id}>
                    <div>
                        <strong>Nom:</strong> {activite.nom}
                    </div>
                    <div>
                        <strong>Thème:</strong> {activite.theme}
                    </div>
                    <div>
                        <strong>Durée:</strong> {activite.duree} minutes
                    </div>
                </li>
            ))}
        </ul>
    );
}

function CoachList({ coachs }: CoachListProps) {
    return (
        <ul className="CoachList">
            {coachs.map((coachs) => (
                <li key={coachs.id}>
                    <div>
                        <strong>Nom:</strong> {coachs.nom}
                    </div>

                </li>
            ))}
        </ul>
    );
}

function SessionList({ sessions }: SessionListProps) {
    return (
        <ul className="SessionList">
            {sessions.map((sessions) => (
                <li key={sessions.id}>
                    <div>
                        <strong>Nom:</strong> {sessions.name}
                    </div>
                    <div>
                        <strong>Groupe:</strong> {sessions.groupe}
                    </div>
                    <div>
                        <strong>Recurrent:</strong> {sessions.isRecurrent ? "Oui" : "Non"}
                    </div>
                    <div>
                        <strong>Coach:</strong> {sessions.coach ? sessions.coach.nom : "Pas de coach sur la séance"}
                    </div>
                    <div>
                        <strong>Ligne:</strong> {sessions.ligne ? sessions.ligne.map(ligne => ligne.nom).join(", ") : "Pas de ligne sur la séance"}
                    </div>

                </li>
            ))}
        </ul>
    );
}

function LigneList({ lignes, tempsDeJeuParLigne }: LigneListProps) {
    return (
        <ul className="LigneList">
            {lignes.map((lignes) => (
                <li key={lignes.id}>
                    <div>
                        <strong>Nom:</strong> {lignes.nom}
                    </div>
                    <div>
                        <div>
                        <strong>Composition :</strong>
                        <ul>
                            {lignes.composition.map((athlete) => (
                                <li key={athlete.id}>
                                    {athlete.nom}
                                </li>
                            ))}
                        </ul>
                    </div>
                    </div>
                    <div>
                        <strong>Temps de jeu total :</strong>{" "}
                        {tempsDeJeuParLigne.get(lignes.id) ?? 0} min
                    </div>
                </li>
            ))}
        </ul>
    );
}

export { AthleteList, ActiviteList, CoachList , SessionList, LigneList };