const input = document.getElementById("input")
const display = document.getElementById("displayBody")
const glitch = document.getElementById("glitch")
let lastMessage = undefined
let listener

const addMessage = (from, content) => {
    const tr = document.createElement("tr")
    const fromTd = document.createElement("td")
    fromTd.innerText = from
    fromTd.setAttribute("class", from === "COMP/CON" ? "from compcon" : "from")

    const textTd = document.createElement("td")
    textTd.innerText = content
    textTd.setAttribute("class", "content")

    tr.append(fromTd, textTd)

    display.appendChild(tr)
    tr.scrollIntoView()
}

const makeConnection = () => {
    const ws = new WebSocket((window.location.protocol === "https:" ? "wss://" : "ws://") + window.location.host + "/comm")

    ws.onmessage = (msg) => {
        const message = JSON.parse(msg.data)
        switch (message.type) {
            case "error":
                addMessage("*", message.content)
                break
            case "message":
                addMessage(message.user, message.content)
                break
            case "history":
                addMessage(message.user, message.content)
                break
            case "ready":
                display.innerHTML = ""
                if (lastMessage) {
                    localStorage.setItem("username", lastMessage)
                }
                addMessage("*", message.content)
        }
    }

    ws.onerror = () => {
        setTimeout(makeConnection, 1000)
    }
    ws.onclose = () => {
        setTimeout(makeConnection, 1000)
    }

    ws.onopen = () => {
        if (localStorage.getItem("username")) {
            ws.send(JSON.stringify({
                msg: localStorage.getItem("username")
            }))
        }
    }
    listener = ws
}

makeConnection()


input.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
        listener.send(JSON.stringify({
            msg: input.innerText
        }))
        lastMessage = input.innerText
        e.preventDefault()
        input.innerText = ""
    }
})

const fun = (pool) => {
    const len = Math.ceil(3 + (Math.random() * 15))
    let s = ""
    for (let i = 0; i < len; i++) {
        s = s + pool.at(Math.floor(Math.random() * pool.length))
    }
    return s
}

const pools = [
    [1, () => ["LIGHT THE FIRES", "green"],],
    [5, () => [fun("◯◉"), "cyan"],],
    [10, () => [fun("🮗🮖▓▧🮐█🮙▩▥▦🮕▤🮘▨░"), "white"],],
    [12, () => ["🯁🯂🯃🮲🮳", "white"]],
    [100, () => [fun(" !\"#$%&\\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\\\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþ'"), "gray"]],
]

const spaz = () => {
    const r = Math.random() * 100
    for (const [chance, func] of pools) {
        if (r < chance) {
            const [text, color] = func()
            glitch.style.color = color
            glitch.innerText = text
            break
        }
    }
}
spaz()

window.addEventListener("keydown", () => {
    spaz()
})