import { loadAdditionalUserNames, loadChatMessage } from './dom'

const OBSERVER_RATE_LIMIT = 1
let observerLastRun: number = 0

function observerCallback() {
    if (Date.now() - observerLastRun < OBSERVER_RATE_LIMIT) {
        return
    }
    observerLastRun = Date.now()

    const chatbox = document.querySelector<HTMLDivElement>(
        '.chat-scrollable-area__message-container'
    )
    const chatboxMessages = Array.from(chatbox?.children ?? [])

    for (const chatboxMessage of chatboxMessages) {
        // set flag on message
        if (chatboxMessage.classList.contains('obf-loaded')) {
            continue
        }

        loadChatMessage(chatboxMessage)
        loadAdditionalUserNames(chatboxMessage)
    }
}

// attach observer
const observer = new MutationObserver(observerCallback)
observer.observe(document, { attributes: true, childList: true, subtree: true })

// attach styles
const styleAddition = document.createElement('style')
styleAddition.innerHTML = `
.chat-line__message--badges {
    display: none;
}
.ismod .chat-line__message--badges {
    display: inline;
}
.ismod .chat-line__message--badges > span {
    display: none;
}
.ismod .chat-line__message--badges > span[data-badge="moderator"],
.ismod .chat-line__message--badges > span[data-badge="broadcaster"] {
    display: inline-block;
}

.seventv-paint {
    background-image: none !important;
}

img.obf-image {
    vertical-align: middle;
    margin: -0.5rem 0;

    height: 1.8rem;
}
`
document.head.appendChild(styleAddition)