function handleCheckbox() {
    const extensionInput = document.getElementById("extensionInput");
    const directLineInput = document.getElementById("directLineInput");
    if (document.getElementById("directLineCheckbox").checked) {
        extensionInput.style.display = "none";
        directLineInput.style.display = "block";
        document.getElementById("extension").value = "";
    } else {
        extensionInput.style.display = "block";
        directLineInput.style.display = "none";
        document.getElementById("directLine").value = "";
    }
}

function submitForm() {

}

function getLocations() {
    //TODO use (backend)/data/locations and do `document.getElementById("location").innerHtml`
    //TODO and add <option> tags with the appropriate names, then create a map of names to other data
    //TODO find equivalent of object to make things easier?
}

let backendUrl = "http://127.0.0.1:8090"

async function checkBackend() {
    const statusCircle = document.getElementById("statusCircle");
    const previousState = statusCircle.classList.contains("connected") ? "connected" : "disconnected";
    statusCircle.classList.replace(previousState, "loading");
    try {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 5000)
        let response;
        await fetch(backendUrl + "/heartbeat", {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Accept': 'application/json'
            },
            signal: controller.signal
        }).then(res => {
            response = res;
            clearTimeout(timeoutId);
        });
        if (response.status === 200) {
            console.log('Backend up with code ', response.status);
        } else {
            console.log("Something weird happened: ", response.status);
        }
        statusCircle.classList.replace("loading", "connected");
    } catch (err) {
        console.log("Backend down with error ", err);
        statusCircle.classList.replace("loading", "disconnected");
    }
}

function saveBackendUrl() {
    let url = document.getElementById("newBackendUrlInput").value;
    document.getElementById("newBackendUrlInput").value = "";
    if (!(url.includes("http://") || url.includes("https://") && url !== "")) {
        url = "http://" + url;
    }
    backendUrl = url;
    document.cookie = "backendUrl=" + backendUrl;
    document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
    console.log("Saved new backendUrl ", backendUrl);
    checkBackend();
}

function loadBackendUrl() {
    let cookieArray = document.cookie.split(";");
    for (let i = 0; i < cookieArray.length; i++) {
        let cookie = cookieArray[i].split("=");
        if (cookie[0] === "backendUrl") {
            backendUrl = cookie[1];
            document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
            console.log("Set backendUrl to ", backendUrl);
        } else {
            console.log("Unable to load backendUrl from cookie, defaulting to 127.0.0.1:8090");
        }
    }
}