var buttonsAdded = false;

export function getLongName () {
    return "Exercise Event Management";
}

export function createButtons (webSocket) {
    //Container
    if (!buttonsAdded){

        //Base Dl Request
        var baseDlRequestContainer = document.createElement("div");
        baseDlRequestContainer.id = "BaseDlRequestContainer";
        baseDlRequestContainer.className = "py-1";
        //Button
        var baseDlRequestBtn = document.createElement("button");
        baseDlRequestBtn.id = "BaseDlRequestBtn";
        baseDlRequestBtn.classList.add ("btn", "btn-primary");
        baseDlRequestBtn.innerHTML = "Send <i>BaseDlRequest</i>";
        //Append
        (document.getElementById ("RequestButtonContainer")).appendChild (baseDlRequestContainer);
        (document.getElementById ("BaseDlRequestContainer")).appendChild (baseDlRequestBtn);
        //Funktion
        document.getElementById("BaseDlRequestBtn").addEventListener('click', function() {
            baseDlRequest(webSocket);
        });
        buttonsAdded = true;
    } 
}


export function decryptMessage (message) {
    document.getElementById("OutputContainer").hidden = false
    
    var table = document.createElement ("table");
    table.classList.add("table","table-hover", "table-condensed");
    var tHead = document.createElement ("thead");
    var tBody = document.createElement ("tbody");
    var headRow = document.createElement ("tr");
    var accordionItem = document.createElement ("div")
    accordionItem.className = "accordion-item";
    accordionItem.innerHTML = `<h2 class="accordion-header" id="heading-${JSON.parse(message.data).type}">
    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-${JSON.parse(message.data).type}">
        ${JSON.parse(message.data).type}
    </button>
    </h2>
    <div id="collapse-${JSON.parse(message.data).type}" class="accordion-collapse collapse show" data-bs-parent="#Output">
        <div id="body-${JSON.parse(message.data).type}" class="accordion-body"></div>
    </div>
    </div>`

    var keys = new Map;
    JSON.parse(message.data).data.forEach ((item, index, array) => {
        var keyIndexCounter = keys.size;
        for (var key in item){
            if (!keys.has(key)){
                var headCell = headRow.insertCell(keys.size);
                headCell.innerHTML = key;
                keys.set(key, keyIndexCounter);
                keyIndexCounter++;
            }            
        }
        var row = tBody.insertRow();
        for (var key of keys) {
            var cell = row.insertCell (keys.get(key));
            if (typeof item[key[0]] === 'object') {                 //Objekt formatieren, falls erforderlich - Funktion rekursiv aufrufen?
                cell.innerHTML = JSON.stringify(item[key[0]])
            }
            else cell.innerHTML = item[key[0]];
        }
    });
    tHead.appendChild (headRow);
    table.appendChild (tHead);
    table.appendChild (tBody);
    document.getElementById("Output").appendChild (accordionItem);
    document.getElementById("body-" + JSON.parse(message.data).type).appendChild(table);
}

//Requests
function baseDlRequest(webSocket) {

    webSocket.send(JSON.stringify({
        type: "baseDlRequest",
        uuid: "UUID"
    }));
}