//TODO: Add button to add new header
//TODO: Add PUT request to Save button
//TODO: Add POST request to new message button
//TODO: Add cookie check when getting the data in getData()
//TODO: Add cookie update after receiving data
//TODO: Update cookie when displayed message is changed
//TODO: Add getData() recall after PUT, POST or DELETE
//TODO: Add delete buttons for headers
//TODO: Add delete buttons for messages

var json;
var jsonIndex = 0;
function getData(uuid){
    $.getJSON('http://localhost:8097/mock/json', function(data) {
        json = data;
        console.log(JSON.stringify(json));
        console.log("Json received");
        fillMessageList();
        console.log("List initiated");
        loadMessage(json[jsonIndex].mockedResponseId);
        console.log("Message loaded");

    });
}

function updateData(){
    var updatedJson = generateJson();
    $.ajax({
        url: 'http://localhost:8097/mock/json',
        type: 'PUT',
        data: updatedJson,
        success: function(data) {
            console.log('PUT request received 200');
        }
    });
    // $.put('http://localhost:8097/mock/json', function(data){
    //
    // });
    // console.log('PUT request sent');
    getData();
}


function clearMock(){
    fillStaticFields('','','','');
    $('#httpStatusValues').html('');
}

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

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

}

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

function fillHeaderTable(headers){
    var innerHTML = $('#httpStatusValues').html();
    innerHTML += generateHeaderTable(headers);
    $('#httpStatusValues').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 class="httpStatusValue">' +
                '<td>' +
                    '<input type="text" name="headerKey" placeholder="key" class="tableField headerName" value="' + keys[i] + '"/></td>' +
                '<td>' +
                    '<input type="text" name="headerKey" placeholder="key" class="tableField" value="' + 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 loadMessage(id){
    for(let i=0; i<json.length; i++){
        if(id == json[i].mockedResponseId){
            jsonIndex = i;
            console.log("Message found");
            initializeMock(jsonIndex);
            console.log("Fields initialized");
            selectMessage(id);
            console.log("Selection complete");
            return;
        }
    }
    console.log("Message not found");
}

function selectMessage(id){
    console.log("Selecting message...");
    $(".menuItemSelected").on("click");
    $(".menuItemSelected").addClass("menuItem");
    $(".menuItemSelected").removeClass("menuItemSelected");
    console.log("Selected message deselected");
    let itemId = '#item_'+id;
    $(itemId).off("click");
    $(itemId).addClass("menuItemSelected");
    $(itemId).removeClass("menuItem");
    console.log("Selected message selected");
}

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

function onbuild(){
    getData();
    sleep(1000);
    // $('#btn-save').bind('click', generateJson);
}

$(document).ready(onbuild());

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}



function generateJson(){
    var newJson =
        {
            clientUUID: json[jsonIndex].clientUUID,
            mockedResponseId: json[jsonIndex].mockedResponseId,
            mediaType: $('#typeSelector').val(),
            messageBody: $('#bodyEditor').val(),
            httpStatus: $('#httpStatus').val(),
            httpHeaders: {},
        };
    newJson['httpHeaders'] = convertTableToJson();
    console.log(JSON.stringify(newJson, null, 2));
    return newJson;
}

// $("table tr").eq(row).find("td").eq(i%2).append("<img src='"+dataJson[i].imagen+"' width='100'/>");

function convertTableToJson(){
    var rows = $('.httpStatusValue');
    console.log("Rows: "+rows.length);
    var obj = {};
    var key;
    for(let i=0; i<rows.length; i++){
        key = rows.eq(i).children().eq(0).children().eq(0).val();
        obj[key] = rows.eq(i).children().eq(1).children().eq(0).val();
    }
    return obj;
}