async function submitStudentHandler(event) {
    event.preventDefault();

    const studentData = {
        ID: Number(studentInputForms.ID.value),
        FirstName: studentInputForms.FirstName.value,
        LastName: studentInputForms.LastName.value,
        FacultyNumber: Number(studentInputForms.FacultyNumber.value),
        Grade: Number(studentInputForms.Grade.value),
    };

    if (!validateStudent(studentData)) {
        return;
    }

    clearInputFields(studentInputForms);

    await requester.post(ROOT_URL, USER_CREDENTIALS, studentData);
    await loadStudentsHandler();
}

async function loadStudentsHandler() {
    const students = await requester.get(ROOT_URL, USER_CREDENTIALS);
    studentsList.innerHTML = "";

    let fragment = document.createDocumentFragment();

    students
        .sort((s1, s2) => s1.ID - s2.ID)
        .forEach(student => {
            let studentElement = drawStudent(student);
            fragment.appendChild(studentElement);
        });

    studentsList.appendChild(fragment);
}



//requester
//-------------------------------------------------------------------------

function fetchData(URL, headers) {
    return fetch(URL, headers)
        .then(handleResponse)
        .then(parseResponseData);
}

function handleResponse(response) {
    if (!response.ok) {
        throw new Error(response.statusText);
    }

    return response;
}

function parseResponseData(response) {
    return response.json();
}

function buildHeaders(httpMethod, user, data) {
    let headers = {
        method: httpMethod,
        headers: {
            "Authorization": `Basic ${btoa(`${user.name}:${user.password}`)}`,
            "Content-Type": "application/json",
        }
    };

    if (httpMethod === "POST" || httpMethod === "PUT") {
        headers.body = JSON.stringify(data);
    }

    return headers;
}

function get(URL, user) {
    let headers = buildHeaders("GET", user);

    return fetchData(URL, headers);
}

function post(URL, user, data) {
    let headers = buildHeaders("POST", user, data);

    return fetchData(URL, headers, data);
}

function put(URL, user, data) {
    let headers = buildHeaders("PUT", user, data);

    return fetchData(URL, headers);
}

function del(URL, user) {
    let headers = buildHeaders("DELETE", user);

    return fetchData(URL, headers);
}

export const requester = {
    get,
    post,
    put,
    del
};