var json;
function getData(uuid){
    $.getJSON('http://localhost:8097/mock/json', function(data) {
        json = data;
        fillMessageList();
        initializeMock(json, 0)
    });
}

function initializeMock(json, id){
    fillStaticFields(json[id].clientUUID
        , json[id].mockedResponseId
        , json[id].mediaType
        , json[id].messageBody
        , json[id].httpStatus);
    fillHeaderTable(json[id].httpHeaders);
}

function fillStaticFields(uuid, id, mediaType, body, httpStatus){
    $('#messageLink').html(createLink(uuid,id));
    $('#typeSelector').val(mediaType);
    $('#bodyEditor').html(body);

    //TODO: HttpStatus
}

function createLink(uuid, id){
    var link = 'http://localhost:8097/klaus/v1/'+uuid+'/'+id;
    return link;
}

function fillHeaderTable(headers){
    var innerHTML = $('#headerTable').html();
    innerHTML += generateHeaderTable(headers);
    $('#headerTable').html(innerHTML);
}

function generateHeaderTable(headers){
    let count = 0;
    let innerHTML = '';
    for(var item in headers){
        if( headers.hasOwnProperty(item) ) count++;
    }
    var keys = new Array(count);
    var values = new Array(count);
    let index = 0;
    for(var key in Object.keys(headers)){
        keys[index++]=Object.keys(headers)[key];
    }
    index = 0;
    for(var val in headers){
        values[index++]=headers[val];
    }
    for(let i=0; i<count; i++){
        innerHTML+=
            '<tr>' +
                '<td class="headerName">' + keys[i] + '</td>' +
                '<td class="headerField">' + values[i] + '</td>' +
            '</tr>';
    }
    return innerHTML;
}

function fillMessageList(){
    var innerHTML = '';
    for(let i=0; i<json.length; i++){
        innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
    }
    $("#listItems").append(innerHTML);
}

function generateMessageTileHtml(id, httpStatus, mediaType){
    var innerHTML = '<div class="menuItem" id="item' + id + '">' +
        '<table><tr><td>Id: '+ id +'</td></tr>' +
        // '<tr><td>Content-type: '+mediaType+'</td></tr>' +
        '<tr><td>Http-status: '+ httpStatus +'</td></tr>' +
        '</table></div>';
    return innerHTML;
}

$(document).ready(getData());