/**
 * Definitions
 */

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

const messageTypes = [
    "INFO",
    "DEB",
    "ERR"
]
const messageTypesColors = [
    "#e74c3c",
    "#95a5a6",
    "#ecf0f1"
]

const messageColors = [
    "#e74c3c",
    "#95a5a6",
    "#ecf0f1"
]

const serviceNames = [
    "API",
    "MAILER",
    "STORAGE",
    "SSE",
    "WS"
]
const serviceNamesColors = [
    "yellow",
    "orange",
    "blue",
    "green",
    "purple"
]

const serviceTypes = [
    "ALPHA",
    "BETA",
    "STABLE"
]
const serviceTypesColors = [
    "red",
    "orange",
    "blue"
]

const wsAddress = "ws://localhost:50000/ws?auth=aksmdaksdmaskdm213askm"

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

function addMessage(messageType, serviceType, serviceName, message, timestamp) {
    let li = document.createElement("li")

    li.innerHTML = formatDate(timestamp) +
    formatServiceType(serviceType) +
    formatMessageType(messageType) +
    formatServiceName(serviceName) +
    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(timestamp) {
    const date = new Date(timestamp * 1000)
    console.log(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 formatServiceType(serviceType) {
    return clampOn() + "<span style='color: " + serviceTypesColors[serviceType] + "'>" + serviceTypes[serviceType] + "</span>" + clampClosed()
}

function formatServiceName(serviceName) {
    return clampOn() + "<span style='color: " + serviceNamesColors[serviceName] + "'>" + serviceNames[serviceName] + "</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"
    }
})

// websocket

let ws = null

window.onload = () => {
    connectWS()
}

function connectWS() {
    ws = new WebSocket(wsAddress)

    ws.onopen = () => {
        console.info("ws open")
    }
    
    ws.onmessage = (msg) => {
        console.log("rec msg:", msg.data)

        let data = JSON.parse(msg.data)

        console.log("data", data)

        addMessage(data["MessageType"], data["ServiceType"], data["ServiceName"], data["Msg"], data["Timestamp"])
    }
    
    ws.onclose = (e) => {
        console.log("closed", e.reason.code)
        if (e.reason.code === 1005) return

        console.log("ws closed", e)
        setTimeout(() => connectWS(), 100)
    }

    ws.onerror = (err) => {
        console.warn("err:", err)
    }
}