import React from "react";
import { Athlete, Activite, Coach, Session, Ligne } from "../classes";
import ObjectSession from "./object/session";
import {calculStatsAthlete, niveauAlerte} from "../utils/athleteUtils";
import {calculTempsDeJeuParLigne} from "../utils/ligneUtils";
import ObjectActivite from "./object/activite";


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




function AthleteList({ athletes, sessions }: AthleteListProps) {
    const [dateDebut, setDateDebut] = React.useState(new Date());
    const [dateFin, setDateFin] = React.useState(new Date());
    const [seuilCritique, setSeuilCritique] = React.useState(0);
    const [seuilMax, setSeuilMax] = React.useState(0);

    const dateToDatetimeLocal = (date: Date) => {
        const pad = (n: number) => n.toString().padStart(2, "0");
        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
    };

    return (
        <>
            <div className="creneau-stats">
                <label>
                    Début :
                    <input
                        type="datetime-local"
                        value={dateToDatetimeLocal(dateDebut)}
                        onChange={e => setDateDebut(new Date(e.target.value))}
                    />
                </label>

                <label>
                    Fin :
                    <input
                        type="datetime-local"
                        value={dateToDatetimeLocal(dateFin)}
                        onChange={e => setDateFin(new Date(e.target.value))}
                    />
                </label>
                <label>
                    Seuil critique :
                    <input
                        type="number"
                        value={seuilCritique}
                        min={1}
                        onChange={e => setSeuilCritique(Number(e.target.value))}
                    />
                </label>
                <label>Seuil max :
                    <input
                        type="number"
                        value={seuilMax}
                        min={1}
                        onChange={e => setSeuilMax(Number(e.target.value))}
                    />
                </label>
            </div>

            <ul className="AthleteList">
                {athletes.map(a => {
                    const stats = calculStatsAthlete(sessions, a, dateDebut, dateFin);
                    const alerte = niveauAlerte(stats, seuilCritique, seuilMax);

                    return (
                        <li key={a.id}>
                            <div><strong>Nom:</strong> {a.nom}</div>
                            <div><strong>Groupe:</strong> {a.groupes}</div>
                            <div><strong>Nombre de sessions:</strong> {stats.nbSessions}</div>
                            <div><strong>Sessions/semaine:</strong> {stats.nbSessionsPerWeek.toFixed(2)}</div>
                            <div><strong>Alerte:</strong> {alerte}</div>
                            <div><strong>Distribuion des activités:</strong> {stats.distributions}</div>
                        </li>
                    );
                })}
            </ul>
        </>
    );
}

function ActiviteList({ activites }: ActiviteListProps) {
    return (
        <div className="list_object">
            {activites.map((activite) => (
                    <ObjectActivite activite={activite}/>
            ))}
            
        </div>
    );
}

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 (
        <div className="list_object">
            {sessions.map((session) => (
                    <ObjectSession session={session}/>
            ))}
            
        </div>
    );
}

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 };