var defaultStrings = [];
const color_grey = "#6b6b6b";
const color_red = "#ff8f8f";

//Remove default text and set color to black
function clearDefaultContent(element, text) {
    if (element.value == text) {
        element.value = "";
        element.style.color = "#000000";
        element.style.backgroundColor = "#ffffff";
    }
}

//Set default text in grey
function setDefaultContent(element, text) {
    if (element.value == "") {
        var id = element.getAttribute('id');
        if (!defaultStrings.includes(text)) {
            defaultStrings.push(text);
        }
        if (id == "xmlArea") {
            element.style.color = color_grey;
            element.value = text;
        }
        if (id == "transformArea") {
            element.style.color = color_grey;
            element.value = text;
        }
    }
}

function hideList(collList) {
    for (i = 0; i < collList.length; i++) {
        if (collList[i].nextElementSibling !== null) {
            collList[i].nextElementSibling.style.maxHeight = null;
            collList[i].nextElementSibling.classList.toggle("collapsibleDataExpanded", false);
        }
        collList[i].style.display = 'none';
        collList[i].classList.remove("collapsibleActive");
    }
}

function checkDefault(text){
    return defaultStrings.includes(text);
}

function showList(collList) {
    for (i = 0; i < collList.length; i++) {
        collList[i].style.display = 'block';
    }
}

function smoothFoldElement(element, toogleState, toggleParrent){
    if (toogleState) {
        console.log("DUPA");
        if(toggleParrent){
            element.parentElement.style.maxHeight = "0px";
        }
        
        element.classList.toggle("active", false);
        var subLists = collapsibleData.getElementsByClassName("collapsibleData");
        for (j = 0; j < subLists.length; j++) {
            subLists[j].style.maxHeight = null;
        }
    } else {
        collapsibleData.parentElement.style.maxHeight = (collapsibleData.parentElement.scrollHeight) + "px";
        collapsibleData.classList.toggle("active", true);
        if (collapsibleData.parentElement.classList.contains("collapsibleData") && collapsibleData.parentElement.classList.contains("active")) {
            collapsibleData.parentElement.style.maxHeight = (collapsibleData.parentElement.scrollHeight + collapsibleData.scrollHeight) + "px";
        }
    }
}

//Set tooltip info, function is called by onClick handlers
function refreshTooltip() {
    var resizeList = document.getElementsByClassName("collapsibleData");
    console.log("collDataList: " + resizeList.length)
    document.getElementById("processorTooltipInfo").innerText = procInfo;
    document.getElementById("xsltelementsheader").innerText = XSLTheader;
}

function performRequest(text, checkXML, checkTransform){
    var xmlData = document.getElementById("xmlArea").value.trim();
    var transformData = document.getElementById("transformArea").value.trim();
    
    var empty = false;
    if (defaultStrings.includes(xmlData) && checkXML) {
            document.getElementById("xmlArea").style.backgroundColor = color_red;
            xmlData = "";
            empty = true;
    }
    if (defaultStrings.includes(transformData) && checkTransform) {
        document.getElementById("transformArea").style.backgroundColor = color_red;
        empty = true;
    }
    if (!empty) {
        restRequest(text);
    }else{
        document.getElementById("resultArea").value = "No data provided!";
        return false;
    }
    
}

//Form REST request, send, receive and display in resultArea
async function restRequest(text) {
    const escapeChar = "specialEscapeChar";
    // const addr = "http://localhost:8081/" + text;
    const addr = "http://gordon.zipper.release11.com:8081/" + text;
    
    var xmlData = document.getElementById("xmlArea").value.trim();
    var transformData = document.getElementById("transformArea").value.trim();

    if(defaultStrings.includes(xmlData)){
        xmlData = "<empty/>";
    }

    // var data = xmlData.concat(escapeChar, transformData);

    // const url = addr.concat("?escapechar=", escapeChar, "&processor=", getProcInfo());

    var jsonData = JSON.stringify({
        "data" : xmlData,
        "process" : transformData,
        "processor" : getProcessor(),
        "version" : getVersion()
    });
    // console.log(jsonData);
    var init = {
        headers: new Headers({
        }),
        body: jsonData,
        // body: data,
        method: "POST"
    };
    var request = new Request(addr, init);

    

    await fetch(request).then(response => {
        console.log(response.status);
        response.text().then(function (text) {
            console.log(text);
            var result = JSON.parse(text);
            document.getElementById("resultArea").value = result.result;
            document.getElementById("procinfo").innerText = ' Computed using '.concat(" ", result.processor);
            if (response.ok) {
                document.getElementById("procinfo").innerText = document.getElementById("procinfo").innerText.concat(" in ", result.time, "ms");
                procinfo.style.color = "#30aa58";
            } else {
                procinfo.style.color = "#aa3030";
            }
        });

    });
}