import { useState } from "react";
import { useLocalData } from "../context/useLocalData";
import { Activite, Athlete, Coach , Session, Ligne, Admin } from "../classes";
import {calculTempsDeJeuParLigne} from "../utils/ligneUtils";
import { keyboard } from "@testing-library/user-event/dist/keyboard";
import ObjectSession from "./object/session";
import ObjectUser from "./object/user";


	export type keyWord = "athletes" | "activites" | "coachs" | "sessions"| "lignes";

	export default function RessourcePanel() {
	    const { user } = useLocalData();
		//const user = getUserTest(); //TODO
		const [value,setValue] = useState<keyWord>("athletes");

	    if (user instanceof Athlete) return null;


	    const allAthletes: Athlete[] = [];

	    const allActivites: Activite[] = [];

	    const allCoachs: Coach[] = [];

	    const allSessions: Session[] = [];

		const allLignes: Ligne[] = [];




	    return (
		<div className="ressource_panel">
		    <div>
		        Sélectionner une ressource:
		    </div>
		    <select
		        onChange={(e) => {
		            const v = (e.target as HTMLSelectElement).value;
					setValue(v as keyWord)
		        }}>
		        <option value="athletes">Athlètes</option>
		        <option value="activites">Activités</option>
		        {user instanceof Admin && <option value="coachs"> Coachs</option>}
		        <option value="sessions"> Sessions</option>
		        <option value="lignes"> Lignes</option>

		    </select>

			<div className="edt_sessions_panel">
				<h3>Liste des {value}</h3>
				<div className="list_object">
					{value==="athletes" && (
						allAthletes.map((athlete) => ( 
							<ObjectUser athlete={athlete}/>
						))
					)}
					{value==="activites" && (
						allSessions.map((session) => ( //TODO
							<ObjectSession session={session}/>
						))
					)}
					{value==="coachs" && (
						allSessions.map((session) => ( //TODO
							<ObjectSession session={session}/>
						))
					)}
					{value==="sessions" && (
						allSessions.map((session) => (
							<ObjectSession session={session}/>
						))
					)}
					{value==="lignes" && (
						allSessions.map((session) => ( //TODO
							<ObjectSession session={session}/>
						))
					)}
				</div>
			</div>
		</div>
	    );
	}