import { useState, useEffect } from "react";
import { Session, User, Coach, Activite, Groupe } from "../classes";
import { useLocalData } from "../context/useLocalData";
import { activiteService, sessionService } from "../api";
import { postSession } from "../requetes";

export const CreateSession = () => {
    const {user} = useLocalData();
    const [session,setSession] = useState<Session>(new Session());
    const [activities, setActivities] = useState<Activite[]>([]);
    const [name,setName] = useState("");
    const [groupe, setGroupe] = useState<Groupe>("");
    const [creneau, setCreneau] = useState("");
    const [duree, setDuree] = useState<number>(0);
    const [activiteNom, setActiviteNom] = useState("");
    const [activiteTheme, setActiviteTheme] = useState("");
    const [activiteDuree, setActiviteDuree] = useState(0);
    const [isRecurent, setIsRecurent] = useState(false);

    async function addAcitivte(){
        if (!activiteNom) return;

        const newActivite = new Activite();
        newActivite.nom= activiteNom;
        newActivite.theme=activiteTheme;
        newActivite.duree= activiteDuree;
        newActivite.data= new Map<string,string>();
        
        setActivities([...activities, newActivite]);
        session.activites.push(newActivite);



    }

    async function handleCreateSession() {

        postSession(session);
        console.log("Session créée");

        // reset
        setName("");
        setGroupe("");
        setCreneau("");
        setDuree(0);
        setIsRecurent(false);
        setActivities([]);

    }



    return (
        <div className="ent">
            <h2>Créer une session</h2>
            <label>
                Nom:
                <input type="text" value={name} onChange={e => setName(e.target.value)} />
            </label>
            <label>
                Groupe:
            </label>
            <label>
                Creneau:
                <input type="datetime-local" value={creneau} onChange={e => setCreneau(e.target.value)} />
            </label>
            <label>
                Duree (minutes):
                <input type="number" value={duree} onChange={e => setDuree(Number(e.target.value))} />
            </label>
            <label>
                Recurrent:
                <input type="checkbox" checked={isRecurent} onChange={e => setIsRecurent(e.target.checked)} />
            </label>
            <h3>Ajouter une activité : </h3>
            <label>
                Nom de l'activitée:
                <input type="text" value={activiteNom} onChange={e => setActiviteNom(e.target.value)} />
            </label>
            <label>
                Theme:
                <input type="text" value={activiteTheme} onChange={e => setActiviteTheme(e.target.value)} />
            </label>
            <label>
                Duree (minutes):
                <input type="number" value={activiteDuree} onChange={e => setActiviteDuree(Number(e.target.value))} />
            </label>
            <button type="button" onClick={addAcitivte}>Ajouter</button>

            <ul>
                {activities.map((act, idx) => (
                    <li key={idx}>{act.nom} - {act.theme} ({act.duree} min)</li>
                ))}
            </ul>
            

            <button type="button" onClick={handleCreateSession}>Create Session</button>
        </div>
    );
};

export default CreateSession;