import { useState, useEffect } from "react";
import { Session, User, Coach, Activite, Groupe } from "../classes";
import { Modal } from "./Modal";

type CreateActiciteProps = {
    returnActivite: (activite:Activite|null) => void
    session: Session;
}


export function CreateActivite({ returnActivite,session }: CreateActiciteProps){

    const [activities, setActivities] = useState<Activite[]>([]);
    const [activiteNom, setActiviteNom] = useState("");
    const [activiteTheme, setActiviteTheme] = useState("");
    const [activiteDuree, setActiviteDuree] = useState(0);

    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]);

        setActiviteNom("");
        setActiviteTheme("");
        setActiviteDuree(0);

        returnActivite(newActivite);
    }

    function cancel(){
        returnActivite(null);
    }



    return (
        <Modal isOpen={true} onClose={() => cancel()}>
            <div className="create_activite_modal">
                <h2>Nouvelle Activité :</h2>
                <div>Session : {session.name}</div>
                <div>
                    Nom de l'activité:
                </div>
                <div>
                    <input type="text" value={activiteNom} onChange={e => setActiviteNom(e.target.value)} />
                </div>
                <div>
                    Theme:
                </div>
                <div>
                    <input type="text" value={activiteTheme} onChange={e => setActiviteTheme(e.target.value)} />
                </div>
                <div>
                    Duree (minutes):
                </div>
                <div>
                    <input type="number" value={activiteDuree} onChange={e => setActiviteDuree(Number(e.target.value))} />
                </div>
                <button type="button" onClick={()=>addAcitivte()}>Ajouter l'activite</button>
                <button type="button" onClick={()=>cancel()}>Annuler</button>

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

export default CreateActivite;