import FetchService from './service/FetchService.js';

/*-- Objects --*/
const fetchService = new FetchService();
/*-- /Objects --*/

/*--Functions--*/
async function submitForm(e, form) {
    // 1. Prevent reloading page
    e.preventDefault();
    // 2. Submit the form
    // 2.1 User Interaction
    const btnSubmit = document.getElementById('btnSubmit');
    btnSubmit.disabled = true;
    setTimeout(() => btnSubmit.disabled = false, 2000);
    // 2.2 Build JSON body
    const jsonFormData = buildJsonFormData(form);
    // 2.3 Build Headers
    const headers = buildHeaders();
    // 2.4 Request & Response
    const response = await fetchService.performPostHttpRequest(window.location.href + `api/url/shorten`, headers, jsonFormData); // Uses JSON Placeholder
    // 2.5 Inform user of result
    if(response) {
        document.getElementById("shortUrl").innerHTML = response.shortUrl
        document.getElementById("shortUrl").href = response.shortUrl
        document.getElementById("longUrl").innerHTML = "Long Url: " + response.longUrl
        if (response.edit) {
            console.log("Already have this path, editing.")
        }
        if (response.old) {
            document.getElementById("edit").style.visibility = "visible"
            document.getElementById("oldLongUrl").innerHTML = response.old.longUrl
            document.getElementById("oldLongUrl").href = response.old.longUrl
            document.getElementById("oldShortUrl").innerHTML = response.old.shortUrl
            document.getElementById("oldShortUrl").href = response.old.shortUrl
        }
    }    
    else
        alert(`An error occured.`);
}

function buildHeaders(authorization = null) {
    const headers = {
        "Content-Type": "application/json",
        "Authorization": (authorization) ? authorization : "Bearer TOKEN_MISSING"
    };
    return headers;
}

function buildJsonFormData(form) {
    const jsonFormData = { };
    for(const pair of new FormData(form)) {
        jsonFormData[pair[0]] = pair[1];
    }
    return jsonFormData;
}

/*--/Functions--*/

document.getElementById("edit").style.visibility = 'hidden'

/*--Event Listeners--*/
const sampleForm = document.querySelector("#form");
if(sampleForm) {
    sampleForm.addEventListener("submit", function(e) {
        submitForm(e, this);
    });
}
/*--/Event Listeners--*/