//TODO: Add delete buttons for messages
// TODO: Add function to add row
// TODO: Add remove closest tr function to header rows
var clientUUID = '';
var advancedDisplayed = false;
var json = {};
var jsonIndex = 0;
var lastId = 1;
var htable_row = 0;
var host = getDomain();
var dataModified = false;
const addMessageName = 'addMessage';
const loadMessageName = 'changeMessage';
const removeMessageName = 'removeMessage';

const C_UUID = 'mock-uuid';
const C_ID = 'last-displayed-id';
const C_ADV = 'advanced-mode';
const setModified = function(){
    setDataModified();
}
const setOrigin = function(){
    setDataOrigin();
}

const getUpdate = function(){
    updateData();
}
const dataRefresh = function(){
    getData();
}
$('#btn-newtile').click(function(){callAddMessage()});
// $('#btn-addRow').click(function(){addRow()});
// $('#btn-save').click(getUpdate);

function getData(){
    $.getJSON(host + '/api/mock/'+clientUUID, function(data) {
        json = data;
        checkUuid();
        console.log(JSON.stringify(json));
        console.log("Json received");
        refreshData();
    });
}

function checkUuid(){
    if(clientUUID == null || clientUUID == undefined || clientUUID == ''){
        clientUUID = json[0].clientUUID;
        setCookie();
    }
}

function getDomain(){
    var url = window.location.href;
    var arr = url.split("/");
    var result = arr[0] + "//" + arr[2];
    return result;
}

function setDataModified(){
    if(dataModified) return;
    dataModified = true;
    $('#btn-save').addClass('active');
    $('#btn-save').click(getUpdate);
}

//Adding change listener to fields
$('.data-field').change(setModified);

function setDataOrigin(){
    dataModified = false;
    $('#btn-save').removeClass('active');
    $('#btn-save').off();
}

const idToDisplay = function(){
    let defaultId = json[0].mockedResponseId;
    if(lastId == undefined || lastId == null) return defaultId;
    for(let i=0; i<json.length; i++){
        if(json[i].mockedResponseId == lastId){
            return lastId;
        }
    }
    if(jsonIndex <= json.length && jsonIndex > 0){
        jsonIndex -= 1;
        return json[jsonIndex].mockedResponseId;
    } 
    return defaultId;
}

function refreshData(){
    fillMessageList();
    console.log("List initiated");
    let id = idToDisplay();
    console.log('Loading message of id: ' + id);
    loadMessage(id);
    console.log("Message loaded");
}

function setCookie(){
    document.cookie = C_UUID + '=' +clientUUID;
    document.cookie = C_ID + '=' + lastId;
    document.cookie = C_ADV + '=' + advancedVisibility;
}

function loadCookies(){
    clientUUID = getCookie(C_UUID);
    lastId = getCookie(C_ID);
    advancedDisplayed = getCookie(C_ADV) == 'true';
}

function getCookie(cname) {
    var name = cname + '=';
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return '';
}

function callMethodByName(methodObject){
    let name = methodObject.name;
    let id = methodObject.id;
    switch(name){
        case addMessageName: 
            addMessage();
            break;
        case loadMessageName:
            loadMessage(id);
            break;
        case removeMessageName:
            removeMessage(id);
            break;
    }
}

function updateData(){
    var updatedJson = generateJson();
    const dataSaved = function () {
        setDataOrigin();
        refreshData();
        savedModalDisplay();
    }
    $.ajax({
        url: host + '/api/mock',
        type: 'PUT',
        data: JSON.stringify(updatedJson, null, 2),
        contentType: "application/json",
    }).done(dataSaved);
}

function callAddMessage(){
    if(dataModified){
        setMethodToCall(addMessageName, null);
        dataLossModalDisplay();
    }
    else {
        addMessage();
    }
}

function addMessage(){
    $.ajax({
        url: host + '/api/mock/'+clientUUID,
        type: 'POST',
    }).done(dataRefresh);
}

function callRemoveMessage(id){
    if(dataModified){
        setMethodToCall(removeMessageName, id);
        dataLossModalDisplay();
    }
    else {
        removeMessage(id);
    }
}

function removeMessage(id){
    var jsonObject = findJsonById(id);
    $.ajax({
        url: host + '/api/mock/'+clientUUID + '/' + id,
        type: 'DELETE',
    }).done(dataRefresh);
}


function clearMock(){
    fillStaticFields('','','','');
    htable_row = 0;
    $('#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){
    let link = createLink(uuid,id);
    let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
    $('#messageLink').html(linkHtml);
    $('#httpStatus').val(httpStatus);
    $('#typeSelector').val(mediaType);
    $('#bodyEditor').val(body);
    $('#mockedMessageId').html(id);

}

function createLink(uuid, id){
    var link =  host + '/api/mock/r/'+uuid+'/'+id;
    return link;
}

function fillHeaderTable(headers){
    var innerHTML = buildHeaderMapHtml(headers);
    $('#headerMapTable').html(innerHTML);
    $('.tableField').change(function(){setDataModified()});
    $('.btn-hashmap').click(function(){
        $(this).closest('tr').remove();
    })
}

function buildHeaderMapHtml(headers){
    var innerHTML = '';
    for(var key in headers){
        innerHTML += buildRowHtml(key, headers[key]);
    }
    return innerHTML;
}

// TODO: Add this click remove closest tr


function addRow(key, value){
    var headerMap = $('#headerMapTable');
    var headersMapHtml = headerMap.html();
    headersMapHtml += buildRowHtml(key, value);
    headerMap.html(headersMapHtml);
}

const newRowInput = function(){
    const hName = $('#headerKeyInput');
    const hValue = $('#headerValueInput');
    if(checkIfInputValid(hName.val()) && checkIfInputValid(hValue.val())){
        addRow(hName.val(), hValue.val());
        hName.val(null);
        hValue.val(null);
    }
}

$('#btn-newRow').click(newRowInput);

function checkIfInputValid(input){
    return !(input == '' || input == null || input == undefined);
}

function buildRowHtml(key, value){
    return '' + 
    '<tr>' +
        '<td><input class="key" value="' + key + '"></td>' +
        '<td><input value="' + value + '"></td>' +
        '<td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>' +
    '</tr>';
}


function fillMessageList(){
    $("#listItems").html('');
    var innerHTML = '';
    for(let i=0; i<json.length; i++){
        innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
    }
    $("#listItems").append(innerHTML);
    $('.tile').click(function(e) {
        var element = $(this);
        var button = element.find('.btn-tile').children().get(0);
        console.log(button == e.target);
        if(!(button == e.target)){
            console.log("Button is not a target. Loading message.")
            callLoadMessage(parseInt($(this).attr('tileid')));
        }
    });
    $('.btn-tile').click(function(){
        // console.log(this);
        callRemoveMessage($(this).closest('.tile').attr('tileId'));
    })
}


//TODO: Implement methods where its possible
function findJsonById(id){
    return json[findJsonIndexById(id)];
}

function findJsonIndexById(id){
    for(let i=0; i<json.length; i++)
        if(id == json[i].mockedResponseId) return i;
}

function callLoadMessage(id){
    if(dataModified) {
        setMethodToCall(loadMessageName, id);
        dataLossModalDisplay();
    }
    else {
        loadMessage(id);
    }
}

function loadMessage(id){
    if(id == null || id == undefined){
        console.log('id is null');
        return;
    }
    lastId = id;
    setCookie();
    setDataOrigin();
    for(let i=0; i<json.length; i++){
        console.log('id == ' + id + ' mockedId == ' + json[i].mockedResponseId);
        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){
    const tiles = $('.tile');
    console.log("Selecting message...");
    tiles.removeClass("active");
    console.log("Selected message deselected");
    $('.tile[tileid="'+id+'"]').addClass("active");
    console.log("Selected message selected");
}



function generateMessageTileHtml(id, httpStatus, mediaType){
    var innerHTML = '' +
    '<div tileid="' + id + '" class="tile">' +
        '<div class="content">' +
            '<div class="display-space-between">' +
                '<div class="centered-vertically">' +
                    '<p>Id: ' + id + '</p>' +
                    '<p>Status: ' + httpStatus + '</p>' +
                '</div>' +
                '<div>' +
                    '<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>';
    return innerHTML;
}



const onbuild = function(){
    loadCookies();
    getData();
    if(advancedDisplayed) {
        changeAdvancedVisibility();
    }
}

$(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));
    json[jsonIndex] = newJson;
    return newJson;
}


function convertTableToJson(){
    const rows = $('#headerMapTable').children();
    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;
}