var advancedVisibility = false;
var selectMenu = $("#selectMenuContent");
var advancedTab = $("#advanced");
var basicID = $("#basicItemData")
var advancedID = $("#advancedItemData");
var advancedUUIDOptions = $("#uuid-validation-strategy");
var focusedField = false;
function changeAdvancedVisibility(){
    if(advancedVisibility){
        selectMenu.removeClass('active');
        advancedTab.removeClass('active');
        advancedID.removeClass('active');
        advancedUUIDOptions.removeClass('active');
        basicID.addClass('active');
        advancedVisibility = false;
    }
    else {
        selectMenu.addClass('active');
        advancedTab.addClass('active');
        advancedID.addClass('active');
        advancedUUIDOptions.addClass('active');
        basicID.removeClass('active');
        advancedVisibility = true;
    }
    setCookie();
}

const historyFilter = $('#history-filter');
const historyFilterSwitch = function(){
    historyFilter.toggleClass('active');
}

$("#optional").click(changeAdvancedVisibility);
$('#historyTab').click(showHistory);
$('#btn-history-filter').click(historyFilterSwitch);


const tabitem = $('.tabitem');
function showHistory(){
    $('#headersTab').click(showHeaders);
    tabitem.removeClass('active');
    $('.tabcontent').removeClass('active');
    $('#history').addClass('active');
    $('#historyTab').addClass('active');
    $('#historyTab').off('click');
    initializeHistory();
}

function initializeHistory(){
    historyFilter.removeClass('active');
    getLast24hHistoryData();
}

function showHeaders(){
    $('#historyTab').click(showHistory);
    tabitem.removeClass('active');
    $('.tabcontent').removeClass('active');
    $('#headers').addClass('active');
    $('#headersTab').addClass('active');
    $('#headersTab').off('click');
}

function showHeadersHistory(element){
   historyTable = '';
   headers = parseHeaders(element.id)
   headers.forEach(
    (value,key) => {
        historyTable +=
        '<tr>' +
        '<td>'+ key + '</td>' +
        '<td>'+ value + '</td>' +
        '</tr>'
    }
   );
    document.getElementById('header-history-table-body').innerHTML = historyTable;
    switchPopups('history-headers-table');
    showPopup();
}

function formatXML(xml) {
    const address = window.location.protocol + "//" + window.location.hostname + ":" + 8082 + "/prettify";
    var data = {
        data: xml,
        process: "",
        processor: "libxml",
        version: "1.0"
    }

    console.log("formattedXML");
    fetch(address, {
        method: 'POST',
        body: JSON.stringify(data)
    })
        .then(async (response) => {
            const promise = response.json();
            if (!response.ok) {
                throw Error(await promise);
            }
            return promise;
        })
        .then((data) => {
            document.getElementById('code-highlight-content').innerText = data.result;
            highlightSyntax('code-highlight-content');
            //console.log(data.result);
        })
        .catch((error) => {
            console.error('Error:', error);
        });

}

function showRequestBody(element){
    requestBody = "";
    historyRequestBody = historyJson[element.id].requestBody;
    switch(historyJson[element.id].headers["content-type"]){
        case "application/json":{
            const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/formatting"
            fetch(address, {
                method: 'POST',
                body: historyRequestBody
            })
                .then(async (response) => {
                    const promise = response.json();
                    if (!response.ok) {
                        throw Error(await promise);
                    }
                    return promise;
                })
                .then((data) => {
                    requestBody = '<code class="language=json">'+data.data+'</code>';

                    document.getElementById('history-request-body-content').innerHTML = requestBody;
                    hljs.highlightElement(document.getElementById('history-request-body-content'));
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
            break;
        }
        case "application/xml":{
            //document.getElementById('code-highlight-content').innerText = historyRequestBody;
            formatXML(historyRequestBody);
            
            break;
        }

        default:{
            requestBody = '<code>'+historyRequestBody+'</code>';
            document.getElementById('history-request-body-content').innerText = requestBody;
            hljs.highlightElement(document.getElementById('history-request-body-content'));
        }
    }
    switchPopups('history-request-body');
    showPopup();
}

function focusInTip(element){
    showTip(element);
    focusedField = true;
}

function focusOutTip(element){
    focusedField = false;
    hidTip(element);
}

function refreshHistoryRecords(){
    getLast24hHistoryData();
}

function hidTip(element){
    if(focusedField) return;
    $('#'+element).removeClass('active');
}

function showTip(element){
    if(focusedField) return;
    $('.tip').removeClass('active');
    $('#'+element).addClass('active');
}

$('#messageLink').mouseover(function(){showTip('messageLinkTip')});
$('#messageLink').mouseleave(function(){hidTip('messageLinkTip')});

$('#httpStatus').mouseover(function(){showTip('httpStatusTip')});
$('#httpStatus').focusin(function(){focusInTip('httpStatusTip')});
$('#httpStatus').mouseleave(function(){hidTip('httpStatusTip')});
$('#httpStatus').focusout(function(){focusOutTip('httpStatusTip')});

$('#typeSelector').mouseover(function(){showTip('typeSelectorTip')});
$('#typeSelector').focusin(function(){focusInTip('typeSelectorTip')});
$('#typeSelector').mouseleave(function(){hidTip('typeSelectorTip')});
$('#typeSelector').focusout(function(){focusOutTip('typeSelectorTip')});

$('#bodyEditor').mouseover(function(){showTip('bodyEditorTip')});
$('#bodyEditor').focusin(function(){focusInTip('bodyEditorTip')});
$('#bodyEditor').mouseleave(function(){hidTip('bodyEditorTip')});
$('#bodyEditor').focusout(function(){focusOutTip('bodyEditorTip')});

$('#headersTab').mouseover(function(){showTip('headersTabTip')});
$('#headersTab').mouseleave(function(){hidTip('headersTabTip')});

$('#historyTab').mouseover(function(){showTip('historyTabTip')});
$('#historyTab').mouseleave(function(){hidTip('historyTabTip')});

$('#headerKeyInput').mouseover(function(){showTip('newHeaderTip')});
$('#headerKeyInput').focusin(function(){focusInTip('newHeaderTip')});
$('#headerKeyInput').mouseleave(function(){hidTip('newHeaderTip')});
$('#headerKeyInput').focusout(function(){focusOutTip('newHeaderTip')});

$('#headerValueInput').mouseover(function(){showTip('newHeaderTip')});
$('#headerValueInput').focusin(function(){focusInTip('newHeaderTip')});
$('#headerValueInput').mouseleave(function(){hidTip('newHeaderTip')});
$('#headerValueInput').focusout(function(){focusOutTip('newHeaderTip')});

$('#btnSave').mouseover(function(){showTip('btnSaveTip');});
$('#btnSave').focusin(function(){focusInTip('btnSaveTip')});
$('#btnSave').mouseleave(function(){hidTip('btnSaveTip')});
$('#btnSave').focusout(function(){focusOutTip('btnSaveTip')});

$('#new-tile').mouseover(function(){showTip('btn-newTileTip');});
$('#new-tile').mouseleave(function(){hidTip('btn-newTileTip')});
$('#new-tile').focusout(function(){focusOutTip('btn-newTileTip')});

$('#listItems').mouseover(function(){showTip('messagesTip');});
$('#listItems').mouseleave(function(){hidTip('messagesTip')});


$('#uuid-edit-field').mouseover(function(){ showTip('UUIDFieldTip') });
$('#uuid-edit-field').mouseleave(function(){ hidTip('UUIDFieldTip') });

$('#uuid-validation-strategy').mouseover(function(){ showTip('UUIDValidationStrategyTip') });
$('#uuid-validation-strategy').mouseleave(function(){ hidTip('UUIDValidationStrategyTip') });

$('#editableBlock').mouseover( function(){ showTip('UUIDEditionTip') } );
$('#editableBlock').mouseleave(function(){ hidTip('UUIDEditionTip') });