/**
 * Definitions
 */

const colorClamp = "#34495e"
const colorTime = "#95a5a6"

const serverTypes = [
    "API",
    "StorageServer"
]
const serverTypesColors = [
    "yellow",
    "orange"
]
const messageTypes = [
    "ERR",
    "DEB",
    "INFO"
]
const messageTypesColors = [
    "#e74c3c",
    "#95a5a6",
    "#ecf0f1"
]
const messageColors = [
    "#e74c3c",
    "#95a5a6",
    "#ecf0f1"
]

/**
 * Begin of code
 */
const messages = document.getElementById("messages")
let autoScroll = true;

function addMessage(serverType, messageType, message) {
    let li = document.createElement("li")

    li.innerHTML = formatDate() +
    formatMessageType(messageType) +
    formatServerType(serverType) +
    formatMessage(message, messageType)
    
    messages.appendChild(li)

    if (autoScroll) {
        li.scrollIntoView()
    }

    deleteOldMessages()
}

function deleteOldMessages() {
    if (messages.childElementCount > 500) {
        messages.removeChild(messages.getElementsByTagName("li")[0])
    }
}

function clampOn() {
    return "<span style='color: "+colorClamp+"'>[</span>"
}

function clampClosed() {
    return "<span style='color: "+colorClamp+"'>]</span> "
}

function formatDate() {
    const date = new Date()

    return clampOn() + 
    "<span style='color: "+colorTime+"'>" +
    date.getDate().toString().padStart(2, '0') + "." +
    date.getMonth().toString().padStart(2, '0') + "." +
    date.getFullYear() + " " +
    date.getHours().toString().padStart(2, '0') + ":" +
    date.getMinutes().toString().padStart(2, '0') + ":" +
    date.getSeconds().toString().padStart(2, '0') + ":" +
    date.getMilliseconds().toString().padStart(3, '0') + " " +
    "</span>" + clampClosed()
}

function formatServerType(serverType) {
    return clampOn() + "<span style='color: " + serverTypesColors[serverType] + "'>" + serverTypes[serverType] + "</span>" + clampClosed()
}

function formatMessage(message, messageType) {
    return "<span style='color: "+messageColors[messageType]+"'>"+message+"</span>"
}

function formatMessageType(messageType) {
    return clampOn() + "<span style='color: " + messageTypesColors[messageType] + "'>" + messageTypes[messageType] + "</span>" + clampClosed()
}

function handleScrollState() {
    console.log("here")
}

let scrollState = document.getElementById('scroll-state')

document.getElementById('btn-toggle-scroll').addEventListener('click', () => {
    console.log("clicked", scrollState.innerHTML)
    
    if (scrollState.innerHTML == "on") {
        autoScroll = false
        scrollState.style.color = "#e74c3c"
        scrollState.innerHTML = "off"
    } else {
        autoScroll = true
        scrollState.style.color = "#27ae60"
        scrollState.innerHTML = "on"
    }
})