let dateOptions = {month: 'short', year: 'numeric'};
document.addEventListener('DOMContentLoaded', () =>
{
    // check if the user is logged in, if not redirect to log in
    /*    fetch('/api/user/isLoggedIn').then(res => 
        {
            if (!res.ok)
            {
                window.location.href = './';
            }
        });*/
    document.querySelector("#dateFrom").max = new Date().toISOString().split("T")[0];


    fetch("/api/timelineData/edu").then(res =>
    {
        res.json().then(json =>
        {
            if (res.ok)
            {
                for (let i = 0; i < json.length; i++)
                {
                    let id = json[i].ID;
                    let timelineItem = document.createElement("form")
                    timelineItem.id = "timelineItem" + id;
                    timelineItem.classList.add("timelineItem");
                    timelineItem.onsubmit = e => updateEduItem(id, e);
                    timelineItem.innerHTML = `
                    <div class="modifyBtnContainer">
                        <button class="edit" type="button" id="edit${id}" onclick="edit(${id})"><i class="fa-solid fa-pen-to-square"></i></button>
                        <button class="delete" type="button" id="delete${id}" onclick="deleteEduItem(${id})"><i class="fa- fa-trash"></i></button>
                    </div>
                    <div class="dateContainer formControl">
                        <input type="date" name="dateFrom${id}" id="dateFrom${id}" onload="this.max = new Date().toISOString().split('T')[0]" value="${json[i]['startPeriod']}">
                        -
                        <input type="date" name="dateTo${id}" id="dateTo${id}" value="${json[i]['endPeriod']}">
                    </div>
					<h3 class="timelineHeader" id="timelineHeader${id}">${new Date(json[i]["startPeriod"]).toLocaleString('en-gb', dateOptions)} - ${new Date(json[i]["endPeriod"]).toLocaleString('en-gb', dateOptions)}</h3>
                    <div class="gradeContainer formControl">
                        <label for="grade${id}">Grade:</label>
                        <input type="text" name="grade${id}" id="grade${id}" value="${json[i]['grade']}" disabled>
                    </div>
					<div class="formControl">
					    <textarea class="courseText" name="course${id}" id="course${id}" cols="10" rows="3" disabled>${json[i]['course']}</textarea>
					</div>
					
                    <div class="error hidden" id="eduError${id}">
                        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>
                        <div></div>
                    </div>
					<input type="submit" value="Change">
				`;
                    document.getElementById("edu").appendChild(timelineItem);
                }
                return;
            }
            document.querySelector("#edu").innerHTML = "No education data found";
        })
    });
})

document.querySelector("#navOpen").addEventListener("click", e =>
{
    document.querySelector("nav.sideNav").style.removeProperty("width");
    document.querySelector("main.editor").style.removeProperty("margin-left");
    e.target.style.removeProperty("visibility");
});

document.querySelector("#navClose").addEventListener("click", () =>
{
    document.querySelector("nav.sideNav").style.width = "0";
    document.querySelector("main.editor").style.marginLeft = "0";
    document.querySelector("#navOpen").style.visibility = "visible";
});

/**
 * Switches the timeline item between edit and view mode
 * @param id the id of the timeline item
 */
function edit(id)
{
    document.querySelector("#timelineItem" + id).classList.toggle("editing");
    document.querySelector("#grade" + id).toggleAttribute("disabled");
    document.querySelector("#course" + id).toggleAttribute("disabled");
}

function updateEduItem(id, e)
{
    e.preventDefault();
    
    let data = {}
    data["dateFrom"] = document.querySelector("#dateFrom" + id).value;
    data["dateTo"] = document.querySelector("#dateTo" + id).value;
    data["grade"] = document.querySelector("#grade" + id).value;
    data["course"] = document.querySelector("#course" + id).value;
    
    fetch("/api/timelineData/edu/" + id, {
        method: "PATCH",
        body: JSON.stringify(data),
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res =>
    {
        if (res.ok)
        {
            document.querySelector("#timelineHeader" + id).innerHTML = new Date(document.querySelector("#dateFrom" + id).value).toLocaleString('en-gb', dateOptions) + " - " + new Date(document.querySelector("#dateTo" + id).value).toLocaleString('en-gb', dateOptions);
            document.querySelector("#timelineItem" + id).classList.toggle("editing");
            document.querySelector("#grade" + id).setAttribute("disabled", "");
            document.querySelector("#course" + id).setAttribute("disabled", "");
            return;
        }

        if (res.status === 401)
        {
            window.location.href = "./";
            return;
        }        
        
        res.json().then(json =>
        {
            document.querySelector("#eduError" + id).classList.remove("hidden");
            document.querySelector(`#eduError${id} div`).innerHTML = json.error;
        });
        
    })
}