import { useState, useEffect } from "react";
import { Session, User, Coach, Activite, Groupe } from "../classes";
import { useLocalData } from "../context/useLocalData";
import { activiteService, sessionService } from "../api";
import { createSessionAPI, 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<Date>(new Date());
    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() {
        if(user instanceof Coach){
            session.groupe = groupe;
            session.creneau = creneau;
            session.duree = duree;
            session.isRecurrent = isRecurent;
            session.activites = activities;
            session.coach = user;

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

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

            setSession(new Session());
        }
    }   



    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.toISOString().slice(0, 16)} onChange={e => setCreneau(new Date(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;