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


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

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

    async function handleCreateSession(){
        const newSession = new Session();
        newSession.name = name;
        newSession.activites= activities;
        newSession.groupe = groupe;
        newSession.creneau = new Date(creneau);
        newSession.duree= duree;
        newSession.isRecurrent= isRecurent;
        newSession.coach= user as Coach;
        newSession.athletes= [];
        newSession.activites= activities;

        try{
            //reset
            setName("");
            setGroupe("");
            setCreneau("");
            setDuree(0);
            setIsRecurent(false);
            setActivities([]);
        }catch (err){
            console.error(err)
        }
    }

    return (
        <div className="ent">
        <h2>Activité</h2>
        <label>
            Name:
            <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}>Add Activite</button>

        <ul>
            {activities.map((act, idx) => (
                <li key={idx}>{act.nom} - {act.theme} ({act.duree} min)</li>
            ))}
        </ul>
        <h2>Create Session</h2>
        <label>
            Name:
            <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>

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

export default CreateSession;