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 = "";
    }
}

let backendUrl = "https://vcard.caiu.org"
let locations = JSON.parse("{}");

function loadLocations() {
    let locationsList = document.getElementById("location");

    fetchWithTimeout(backendUrl + "/backend/data/locations", {
        timeout: 5000,
        method: 'GET',
        mode: 'cors',
        headers: {
            'Accept': 'application/json'
        }
    }).then(response => {
        response.text().then(text => {
            locations = JSON.parse(text);
            locationsList.innerText = "";
            for (let i = 0; i < locations.length; i++) {
                locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id);
            }
        })
    });
}

function clearForm() {
    document.getElementById("full_name").value = "";
    document.getElementById("title").value = "";
    document.getElementById("email").value = "";
    document.getElementById("extension").value = "";
    document.getElementById("directLine").value = "";
    document.getElementById("cellNumber").value = "";
    document.getElementById("existingFile").value = ""
}

function submitForm() {
    let body =
        "{" +
        "\"name\":\"" + document.getElementById("full_name").value + "\"," +
        "\"title\":\"" + document.getElementById("title").value + "\"," +
        "\"email\":\"" + document.getElementById("email").value + "\"," +
        "\"locationId\":\"" + document.getElementById("location").value + "\"," +
        "\"extension\":\"" + document.getElementById("extension").value + "\"," +
        "\"directNumber\":\"" + document.getElementById("directLine").value + "\"," +
        "\"cellNumber\":\"" + document.getElementById("cellNumber").value + "\"," +
        "\"size\":" + document.querySelector('input[name = outlookVer]:checked').value +
        "}";

    fetchWithTimeout(backendUrl + "/backend/generate", {
        timeout: 5000,
        method: 'POST',
        mode: 'cors',
        Headers: {
            'Accept': 'image/png',
        },
        body: body
    }).then(async response => {
        downloadImage(await response.arrayBuffer());
    });

    clearForm();
}

function downloadImage(arrayBuffer) {
    const blob = new Blob([arrayBuffer], { type: "image/png" });
    const cardElement = document.getElementById("vcard");
    const imgElement = document.getElementById("cardImg");

    let urlCreator = window.URL || window.webkitURL;
    let imageUrl = urlCreator.createObjectURL(blob);

    cardElement.href = imageUrl;
    cardElement.style.display = 'unset';
    imgElement.src = imageUrl;
    cardElement.download = "card.png";
    cardElement.click();
}

function getCardToEdit() {
    let uploadDiv = document.getElementById("uploadDiv");
    let fadeDiv = document.getElementById("fade");
    uploadDiv.classList.remove("hidden");
    fadeDiv.classList.remove("hidden");
}

function exitUpload() {
    document.getElementById("fade").classList.add("hidden");
    document.getElementById("uploadDiv").classList.add("hidden");
}

function dragOverHandler(e) {
    e.preventDefault();
    document.getElementById("dottedDiv").classList.add("hovering");
}

function dragLeaveHandler(e) {
    e.preventDefault();
    document.getElementById("dottedDiv").classList.remove("hovering");
}

function dropHandler(e) {
    let fileInput = document.getElementById("existingFile");
    e.preventDefault();
    document.getElementById("dottedDiv").classList.remove("hovering");
    if (e.dataTransfer.items) {
        if (e.dataTransfer.items[0].type === "image/png") {
            let uploadedFile = e.dataTransfer.items[0].getAsFile();
            let previewImg = document.getElementById("previewImg");
            document.getElementById("uploadLabel").classList.add("with-img");
            fileInput.files[0] = uploadedFile;
            document.getElementById("uploadLabel").innerText = "Card To Edit:\n" + uploadedFile.name;
            previewImg.src = URL.createObjectURL(uploadedFile);
            previewImg.classList.remove("hidden");
            document.getElementById("editCardBtn").classList.remove("disabled");
        }
    }
}

function handleInput() {
    let fileInput = document.getElementById("existingFile");
    let previewImg = document.getElementById("previewImg");
    document.getElementById("uploadLabel").classList.add("with-img");
    document.getElementById("uploadLabel").innerText = "Card To Edit:\n" + fileInput.files[0].name;
    previewImg.src = URL.createObjectURL(fileInput.files[0]);
    previewImg.classList.remove("hidden");
    document.getElementById("editCardBtn").classList.remove("disabled");
}

function loadFromExistingCard() {
    exitUpload();
    const data = new FormData();
    data.append("card", document.getElementById("existingFile").files[0]);

    fetchWithTimeout(backendUrl + "/backend/edit", {
        timeout: 5000,
        method: 'POST',
        mode: 'cors',
        headers: {
            'Accept': 'application/json'
        },
        body: data
    }).then(response => response.json()).then(json => {
        document.getElementById("full_name").value = json.Name;
        document.getElementById("title").value = json.Title;
        document.getElementById("email").value = json.Email;
        document.getElementById("location").value = json.Location;
        if (json.Extension === "") {
            let directLineCheckbox = document.getElementById("directLineCheckbox");
            if (directLineCheckbox.value === "on") {
                document.getElementById("directLine").value = json.DirectNumber;
            }
        } else {
            document.getElementById("extension").value = json.Extension;
        }
        document.getElementById("cellNumber").value = json.CellNumber;
    });
}

async function fetchWithTimeout(resource, options = {}) {
    const { timeout = 8000 } = options;
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout);

    const response = await fetch(resource, {
        ...options,
        signal: controller.signal
    });
    clearTimeout(id);

    return response;
}