let liveGenWS = new WebSocket("ws://localhost:8080/backend/generate/live");

let backgroundLayer = document.getElementById("backgroundLayer");
let loc = document.getElementById("location");
let locationLayer = document.getElementById("locationLayer");
let fullName = document.getElementById("full_name");
let nameLayer = document.getElementById("nameLayer");
let title = document.getElementById("title");
let titleLayer = document.getElementById("titleLayer");
let email = document.getElementById("email");
let emailLayer = document.getElementById("emailLayer");
let extension = document.getElementById("extension");
let directNumber = document.getElementById("directNumber");
let cellNumber = document.getElementById("cellNumber");
let numbersLayer = document.getElementById("numbersLayer");

let dataType = "";

liveGenWS.addEventListener("open", (e) => {
    console.log("Websocket connection opened");
    liveGenWS.send("start;");
}, false);
liveGenWS.addEventListener("message", (e) => {
    const constDataType = dataType;
    if (e.data instanceof ArrayBuffer || e.data instanceof Blob) {
        let blob = e.data;
        if (e.data instanceof ArrayBuffer) {
            blob = new Blob([e.data], { type: "image/png" });
        }
        let urlCreator = window.URL || window.webkitURL;
        let imageUrl = urlCreator.createObjectURL(blob);
        updateLayer(constDataType, imageUrl).then(() => console.log("Updated Layer: " + constDataType));
    } else if (typeof e.data === "string") {
        dataType = e.data;
    }
}, false);

async function updateLayer(type, imageUrl) {
    let workingLayer;
    switch (type) {
        case "location": {
            workingLayer = locationLayer;
            break;
        }
        case "background": {
            workingLayer = backgroundLayer;
            break;
        }
        case "name": {
            workingLayer = nameLayer;
            break;
        }
        case "title": {
            workingLayer = titleLayer;
            break;
        }
        case "email": {
            workingLayer = emailLayer;
            break;
        }
        case "extension" || "directNumber" || "cellNumber": {
            workingLayer = numbersLayer;
            break;
        }
    }
    workingLayer.src = imageUrl;
}

function handleUpdate(val, elem) {
    liveGenWS.send(val + ";" + elem.value);
}

loc.addEventListener("selectionchange", (e) => {
    handleUpdate("location", loc);
    handleUpdate("background", loc);
}, false);
fullName.addEventListener("keyup", (e) => handleUpdate("name", fullName), false);
title.addEventListener("keyup", (e) => handleUpdate("title", title), false);
email.addEventListener("keyup", (e) => handleUpdate("email", email), false);
extension.addEventListener("keyup", (e) => handleUpdate("extension", extension), false);
directNumber.addEventListener("keyup", (e) => handleUpdate("directNumber", directNumber), false);
cellNumber.addEventListener("keyup", (e) => handleUpdate("cellNumber", cellNumber), false);