window.onload = function () {
    addForm = document.getElementById("add");
    addForm.style.display = "none";
    table = document.getElementById("studentInfo");
    table.style.display = "none"
    edit = document.getElementById("editForm");
    edit.style.display = "none";
    document.getElementById('editStudent').addEventListener("click", async (event) => {
        event.preventDefault();
        var response = await fetch('/student');
        var students = await response.json();
        var sName = document.getElementById("findName").value;
        for (s of students) {
            if (sName == s.name) {
                edit.style.display = "inline-block"
                document.getElementById("editName").innerHTML = s.name;
                document.getElementById("editWeight").value = s.weight;
                document.getElementById("editHeight").value = s.height;
                document.getElementById("editHairColour").value = s.hairColour;
                document.getElementById("editGpa").value = s.gpa;
            }
        }
    });
    displayStudents();
}

function addStudent() {
    console.log("add student");
    form = document.getElementById("add");
    form.style.display = "block";
}

function addData() {
    var name = document.getElementById("addName").value;
    var weight = document.getElementById("addWeight").value;
    var height = document.getElementById("addHeight").value;
    var hairColour = document.getElementById("addHairColour").value;
    var gpa = document.getElementById("addGpa").value;
    var data = { name, weight, height, hairColour, gpa };
    var option = { method: "POST", body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } };
    console.log(option);
    fetch('/student', option);
}

async function displayStudents() {
    var response = await fetch('/student');
    var students = await response.json();
    for (s of students) {
        var student = document.createElement('div');
        student.className = "displayDiv";
        student.style.display = "inline-block";
        student.style.textAlign = "center";
        student.style.margin = "20px";
        student.innerText = s.name + "\n" + s.gpa;
        student.style.height = parseInt(s.height) + "px";
        student.style.width = parseInt(s.weight) + "px";
        student.style.overflow = "auto";
        student.style.padding = "20px";
        student.style.color = s.hairColour;
        student.style.border = "1px solid black";

        student.addEventListener("mouseenter", function (event) {
            table.style.display = "table";
            var info = event.target.innerText;
            list = info.split("\n");
            var weight = event.target.style.width;
            var height = event.target.style.height;
            document.getElementById("sName").innerHTML = list[0];
            document.getElementById("sWeight").innerHTML = weight.substring(0, weight.length - 2);
            document.getElementById("sHeight").innerHTML = height.substring(0, height.length - 2);
            document.getElementById("sHairColour").innerHTML = event.target.style.color;
            document.getElementById("sGpa").innerHTML = list[1];
        })
        document.body.appendChild(student);

    }
}

function deleteData() {
    console.log("in delete")
    var name = document.getElementById("findName").value;
    var data = { name };
    var option = {
        method: 'DELETE',
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json'
        }
    }
    console.log(option)
    fetch('/student', option);
    window.location.reload();
}

 function editData() {
    var response =  fetch('/student');
    var students =  response.json();
    var sName = document.getElementById("findName").value;
    for (s of students) {
        if (sName == s.name) {
            edit.style.display = "inline-block"
            document.getElementById("editName").innerHTML = s.name;
            document.getElementById("editWeight").value = s.weight;
            document.getElementById("editHeight").value = s.height;
            document.getElementById("editHairColour").value = s.hairColour;
            document.getElementById("editGpa").value = s.gpa;
        }
    }
}

function updateData() {
    console.log("update data")
    var name = document.getElementById("editName").innerHTML;
    var weight = document.getElementById("editWeight").value;
    var height = document.getElementById("editHeight").value;
    var hairColour = document.getElementById("editHairColour").value;
    var gpa = document.getElementById("editGpa").value;
    var data = { name, weight, height, hairColour, gpa };
    var options = {
        method: 'PUT',
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json'
        }
    }
    console.log(options)
    fetch('/student', options)
    window.location.reload();
}