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) => {
     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" });
         }
         const constDataType = dataType;
         createImageBitmap(blob, 0, 0, 1080, 602, { resizeWidth: 404, resizeHeight: 225 }).then(imgBmp => {
             const layerElem = document.getElementById(constDataType + "Layer");
             let ctx = layerElem.getContext("2d");
             ctx.clearRect(0, 0, 404, 225);
             ctx.drawImage(imgBmp, 0, 0);
         });
     } else if (typeof e.data === "string") {
         dataType = e.data;
     }
    console.log(e.data);
}, false);

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);