var buttonsAdded = false;

export function getLongName () {
    return "File Management";
}

export function createButtons (webSocket) {
    //Container
    if (!buttonsAdded){
        //PDF List Request
        var pdfListRequestContainer = document.createElement("div");
        pdfListRequestContainer.id = "pdfListRequestContainer";
        pdfListRequestContainer.className = "py-1";
        //Button
        var pdfListRequestBtn = document.createElement("button");
        pdfListRequestBtn.id = "pdfListRequestBtn";
        pdfListRequestBtn.classList.add ("btn", "btn-primary");
        pdfListRequestBtn.innerHTML = "Send <i>pdfListRequest</i>";
        //Append
        (document.getElementById ("RequestButtonContainer")).appendChild (pdfListRequestContainer);
        (document.getElementById ("pdfListRequestContainer")).appendChild (pdfListRequestBtn);
        //Funktion
        document.getElementById("pdfListRequestBtn").addEventListener('click', function() {
            pdfListRequest(webSocket);
        });

        /*
        //get Building State
        var pdfDataContainer = document.createElement("div");
        pdfDataContainer.id = "pdfDataContainer";
        pdfDataContainer.className = "py-1";
        //Form
        var string = '<div class="input-group"><input id="PdfData1" type="text" class="form-control border-primary" placeholder="Exercise ID"><input id="PdfData2" type="text" class="form-control border-primary" placeholder="UUID"><button id= "PdfDataBtn" class="btn btn-primary" type="button" id="button-addon2">get PDF Data</button></div>'
        pdfDataContainer.innerHTML = string;
        //Append
        (document.getElementById ("RequestButtonContainer")).appendChild (pdfDataContainer);
        //Funktion
        document.getElementById("PdfDataBtn").addEventListener('click', function() {
            pdfListData(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));
            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 pdfListRequest(webSocket) {
    webSocket.send(JSON.stringify({
        type: "pdfListRequest",
        uuid: "UUID"
    }));
}


/*
function pdfListData(webSocket) {
    webSocket.send(JSON.stringify({
        type: "pdfListData",
        uuid: document.getElementById("PdfData2").value,
        data: {
            exerciseId: document.getElementById("PdfData1").value
        }
    }));
}
*/