import { useEffect, useState } from "react"
import { getUserTest, Session, User } from "../classes"
import { useLocalData } from "../context/useLocalData"
import './style/edt.css';
import {updateSessionsOfUserAPI } from "../requetes";

export const EDT =() =>{
    const {user,setUser} = useLocalData()
    const [sessions, setSessions] = useState<Session[]>([])
    const [week,setWeek] = useState<Date>(getFirstDay(new Date()));
    const week_days:String[] = ["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
    const week_days_nums:number[] = [1,2,3,4,5,6,0];



    function loadSessions(date:Date){
        var maxDate = getNextDay(date,6)

        var newWeek: Session[] = []
        user.sessions.forEach(session => {
            if(session.creneau >= date && session.creneau <= maxDate){
                newWeek.push(session);
            }
        });
        setSessions(newWeek);
    }

    function changeWeek(date:Date){
        setWeek(date);
        loadSessions(date)
    }

    useEffect(() => {
        updateWeek();
    },[week])
    
    async function updateWeek(){
        //TODO updateSession
        //await updateSessionsOfUser(user,null,null);
        loadSessions(week);
        setUser(getUserTest())
    }


    function handlePrev(): void {
        changeWeek(getNextDay(week,-7));
    }

    function handleNext(): void {
        changeWeek(getNextDay(week,7));
    }

    function getFirstDay(date:Date):Date{
        const numWeek = date.getDay();
        var firstDate:Date;
        if(numWeek == 0){
            firstDate = getNextDay(date,-6);
        }
        else{
            firstDate = getNextDay(date,-numWeek+1);
        }
        return firstDate;
    }

    function getNextDay(date:Date,nb:number):Date{
        var newDate = new Date(date);
        newDate.setDate(newDate.getDate() + nb);
        return newDate;
    }

    function dateToString(date:Date){
        const dd_prefix = date.getDate()<10 ? "0" : "";
        const mm_prefix = date.getMonth()+1<10 ? "0" : "";
        const dd:String = dd_prefix+date.getDate().toString();
        const mm:String = mm_prefix+(date.getMonth()+1).toString();
        const yyyy:String = date.getFullYear().toString();
        return dd+"/"+mm+"/"+yyyy;
    }

    function hoursToString(date:Date){
        const hh_prefix = date.getHours()<10 ? "0" : "";
        const mm_prefix = date.getMinutes()+1<10 ? "0" : "";
        const hh:String = hh_prefix+date.getHours().toString();
        const mm:String = mm_prefix+date.getMinutes().toString();
        return hh+"h"+mm;
    }

    function displaySession(session:Session){
        const sDate = session.creneau;
        return(
            <div className="edt_session">
                <div>{hoursToString(sDate)}</div>
                {dateToString(sDate)}
                <button className="edt_button">+</button>
            </div>
        )
    }

    return(
        <div className="edt"> 
            <div className="edt_header">
                <button className="edt_button_week_select" onClick={() =>handlePrev()}>Prev</button>
                <button className="edt_button_week_select" onClick={() => handleNext()}>Next</button>
            </div>
            <div className="edt_colonnes">

                {week_days_nums.map((num,index)=>(
                    <div className="edt_colonne">
                        <div className="edt_day_header">
                            <div> {week_days[index]} </div>
                            <div> {dateToString(getNextDay(week,index))} </div>
                        </div>
                        <div className="edt_day_contedt">
                        {sessions.map((session,index2)=>(
                            session.creneau.getDay()===num &&
                            displaySession(session)
                        ))}
                        </div>
                    </div>
                ))}

            </div>
        </div>
    )
}

export default EDT