const timeout = 30000;

class Message {
    constructor(object, onDestroy) {
        this.target = object.target;
        this.context = object.context;
        this.message = object.message;
        this.self = object.self;
    }

    createEl() {
        this.element = document.createElement('li');
        this.element.className = "item";
        this.element.style.position = "relative";
        let name = document.createElement('span');
        name.className = "text name";
        name.style.color = this.context.color;
        name.innerHTML = escapeHtml(this.context["display-name"]);
        this.element.appendChild(name);

        let message = document.createElement('span');
        message.innerHTML = escapeHtml(this.message);
        message.className = "text message";
        this.element.appendChild(message);

        setTimeout(() => this.destroy(), timeout);
        return this.element;
    }

    destroy() {
        console.log(this.element);
        this.element.className += ' destroy';
    }
}

function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

function addMessage(object) {
    messages .className = "";
    let message = new Message(object);
    messages.appendChild(message.createEl());
    messages.style.bottom = '-' + message.element.offsetHeight + 'px';
    messages.className = "slide";
};

let messages = document.getElementById('messages');
let socket = io();
socket.on('message', addMessage);