var buttonsAdded = false;

export function getLongName () {
    return "Asset 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);
            });

            /*
            //get Asset State
            var getAssetStateContainer = document.createElement("div");
            getAssetStateContainer.id = "GetAssetStateContainer";
            getAssetStateContainer.className = "py-1";
            //Form
            var string = '<div class="input-group"><input id="GetAssetState1" type="text" class="form-control border-primary" placeholder="Asset ID"><input id="GetAssetState2" type="text" class="form-control border-primary" placeholder="Asset Tag"><input id="GetAssetState3" type="text" class="form-control border-primary" placeholder="UUID"><button id= "GetAssetStateBtn" class="btn btn-primary" type="button" id="button-addon2">get Asset State</button></div>'
            getAssetStateContainer.innerHTML = string;
            //Append
            (document.getElementById ("RequestButtonContainer")).appendChild (getAssetStateContainer);
            //Funktion
            document.getElementById("GetAssetStateBtn").addEventListener('click', function() {
                getAssetState(webSocket);
            });
 
            //get Building State
            var getBuildingStateContainer = document.createElement("div");
            getBuildingStateContainer.id = "GetBuildingStateContainer";
            getBuildingStateContainer.className = "py-1";
            //Form
            var string = '<div class="input-group"><input id="GetBuildingState1" type="text" class="form-control border-primary" placeholder="Building ID"><input id="GetBuildingState2" type="text" class="form-control border-primary" placeholder="UUID"><button id= "GetBuildingStateBtn" class="btn btn-primary" type="button" id="button-addon2">get Building State</button></div>'
            getBuildingStateContainer.innerHTML = string;
            //Append
            (document.getElementById ("RequestButtonContainer")).appendChild (getBuildingStateContainer);
            //Funktion
            document.getElementById("GetBuildingStateBtn").addEventListener('click', function() {
                getBuildingState(webSocket);
            });

            //get Building State
            var getAssetsContainer = document.createElement("div");
            getAssetsContainer.id = "GetAssetsContainer";
            getAssetsContainer.className = "py-1";
            //Form
            var string = '<div class="input-group"><input id="GetAssets1" type="text" class="form-control border-primary" placeholder="Asset Type ID"><input id="GetAssets2" type="text" class="form-control border-primary" placeholder="UUID"><button id= "GetAssetsBtn" class="btn btn-primary" type="button" id="button-addon2">get Assets</button></div>'
            getAssetsContainer.innerHTML = string;
            //Append
            (document.getElementById ("RequestButtonContainer")).appendChild (getAssetsContainer);
            //Funktion
            document.getElementById("GetAssetsBtn").addEventListener('click', function() {
                sendGetAssets(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"
    }));
}

function sendGetAssets(webSocket) {
    webSocket.send(JSON.stringify({
        type: "getAssets",
        uuid: document.getElementById("GetAssets2").value,
        data: {
            assetTypeId: document.getElementById("GetAssets1").value
        }
    }));

}

function getAssetState(webSocket) {
    webSocket.send(JSON.stringify({
        type: "getAssetState",
        assetId: document.getElementById("GetAssetState1").value,
        assetTag: document.getElementById("GetAssetState2").value,
        uuid: document.getElementById("GetAssetState3").value
    }));
}

function getBuildingState(webSocket) {
    webSocket.send(JSON.stringify({
        type: "getBuildingState",
        uuid: document.getElementById("GetBuildingState2").value,
        data: {
            buildingId: document.getElementById("GetBuildingState1").value
        }

    }));
}