var historyJson = {};
const maxIterations = 200;

function getHistoryData(){
    $.getJSON(host + '/api/event/' + clientUUID, function(data){
        historyJson = data;
        displayHistory();
    });
}

function historyToHtml(){
    var innerHTML = '';
    var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
    for(let i=0; i<iterations; i++){
        let style = i%2==0 ? ' class="even"' : '';
        innerHTML += '<tr' + style + '>' +
            '<td>' + parseTimeStamp(historyJson[i].dateTimeStamp) + '</td>' +
            '<td>' + historyJson[i].httpMethod + '</td>' +
            '<td>' + parseRequestBody(historyJson[i].requestBody, i) + '</td>' +
            '<td> <button id="'+i+'" class="showHeaderButton" onClick="showHeadersHistory(this);"> Show headers </button> </td>' + 
        '</tr>';
    }
    return innerHTML;
}

function parseRequestBody(requestBody,i){
    return requestBody.length == 0 ?
     "No request body" :
     '<button id="'+i+'" class="showRequestBodyButton" onClick="showRequestBody(this);"> Show request body </button>'
}

function parseTimeStamp(timeStamp){
    return timeStamp.substring(0,19).replace('T',' ');
}

function parseHeaders(pos){
    parsedJson = new Map();
    headers = historyJson[pos].headers
    Object.keys( headers ).forEach(
        (jsonKey) => {
            parsedJson.set( jsonKey , headers[jsonKey] );
        }
    )
    return parsedJson;
}

function displayHistory(){
    $('#historyTable tbody').html(historyToHtml());
}