import { useEffect, 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 ObjectActivite from "./object/activite";
import ObjectUser from "./object/user";
import { getAllSessionsAPI } from "../requetes";
import { useKeycloak } from "@react-keycloak/web";


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

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

		const[allAthletes,setAllAthletes] = useState<Athlete[]>([]);
		const[allActivites,setAllActivites] = useState<Activite[]>([]);
		const[allCoachs,setAllCoachs] = useState<Coach[]>([]);
		const[allSessions,setAllSessions] = useState<Session[]>([]);
		const[allLignes,setAllLignes] = useState<Ligne[]>([]);


		async function updateAthletes() {
		}


		async function updateCoachs() {
		}

		async function updateSessions() {
			const sessions:Session[] = await getAllSessionsAPI();
			setAllSessions(sessions);
			console.log("GET ALL SESSION ");
		}

		async function updateLignes() {
		}


		useEffect(() => {
			if(keycloak.authenticated){
				updateSessions();
				{(user instanceof Admin || user instanceof Coach) &&
					updateAthletes();
					updateCoachs();
					updateLignes();
				}
			}
				

		},[user])


	    return (
		<div className="ressource_panel">

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

					</select>
				</div>
			}

			<div className="edt_sessions_panel">
				<h3>Liste des {value}</h3>
				<div className="list_object">
					{value==="athletes" && (
						allAthletes.map((athlete) => ( 
							<ObjectUser athlete={athlete}/>
						))
					)}
					{value==="activites" && (
						allActivites.map(activite => ( 
							<ObjectActivite activite={activite}/>
						))
					)}
					{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>
	    );
	}