function scrollToBottom() {
    window.scrollTo(0, document.body.scrollHeight);
}

document.addEventListener('DOMSubtreeModified', function() {
    scrollToBottom();
}, false);

var msgid = 0;

function replaceEmojis(message, tags) {
    var emotesToReplace = [];
    var messageString = message;

    if (tags["emotes"] != undefined) {
        const tagsEmotesArray = Object.entries(tags["emotes"]);
    
        tagsEmotesArray.forEach(element => {
            const emoteURLString = element[0];
            emoteCoords = element[1][0];
            let parts = emoteCoords.split("-");
            var emoteString = message.substring(parts[0], Number(parts[1]) + 1);

            // emote string has the twitch emote content
            // emoteURLstring has the twitch emote url part

            var emote = [emoteString, emoteURLString];

            emotesToReplace.push(emote);
        });

        emotesToReplace.forEach(element => {
            while (messageString.includes(element[0])) {
                messageString = messageString.replace(element[0], "<img src=\"https://static-cdn.jtvnw.net/emoticons/v2/" + element[1] + "/default/dark/1.0\">");
            }
        });
    }

    return messageString;
}

const client = new tmi.Client({
	channels: [ 'siskeldev' ]
});

client.connect();

client.on('message', (channel, tags, message, self) => {
    // ignore messages that came from these accounts
    if (
        tags["username"] == "streamelements" ||
        tags["username"] == "nightbot" ||
        tags["username"] == "siskeldevbot"
    ) return;

    // ignore if the first letter is a exclamation mark
    if (
        message.charAt(0) == '!'
    ) return;


    var chatBox = document.getElementById('chatbox');

    var isModerator = tags['mod'] == '1' ? true : false;
    var isSubscriber = tags['subscriber'] == '1'? true : false;
    var isSubscriber = tags['subscriber'] == '1'? true : false;

    var messageConainer = document.createElement('div');
    var username = document.createElement('span');
    var messageText = document.createElement('span');

    messageConainer.className = 'message-fadein';
    messageConainer.id = msgid;
    

    username.innerHTML = tags['display-name'];
    username.className = 'username';
    username.style.color = tags['color'];

    messageText.className ='message';
    messageText.innerHTML = replaceEmojis(message, tags);

    messageConainer.appendChild(username);
    messageConainer.appendChild(messageText);

    chatBox.appendChild(messageConainer);
    chatBox.appendChild(document.createElement('br'));

    document.getElementById(msgid).classList.add('message-container');
    
    setTimeout(function() {
        document.getElementById(msgid).classList.remove('message-fadein');
    }, 1000, msgid);

    setTimeout(function(msgid) {
        console.log(msgid);
        document.getElementById(msgid).classList.add('message-fadeout');
        setTimeout(function(msgid) {
            document.getElementById(msgid).remove();
        }, 1000, msgid);
    }, 10000, msgid);

    msgid++;

    //debug

	console.log(`${tags['display-name']}: ${message}`);

    console.log("tags:");
    console.log(tags);
});