#include watcher.js

var AmiMessageList = function(parent) {
    var container = $element('div', { id: 'chatList', className: 'fullWidth' });
    var isEven = true;
    var idPfx = 'sock_msg_';
    var watchers = new AmiWatcherCollection;
    parent.appendChild(container);

    watchers.define(['nameInsert', 'delete']);

    var reflow = function() {
        isEven = true;
        for(var i = 0; i < container.children.length; ++i) {
            var child = container.children[i];
            child.classList[isEven ? 'remove' : 'add']('rowOdd');
            child.classList[isEven ? 'add' : 'remove']('rowEven');
            isEven = !isEven;
        }
    };

    return {
        add: function(msgInfo) {
            var nameStyle = { color: msgInfo.sender.color };
            if(msgInfo.nameBold) nameStyle.fontWeight = 'bold';
            if(msgInfo.nameItalics) nameStyle.fontStyle = 'italic';
            if(msgInfo.nameUnderline) nameStyle.textDecoration = 'underline';

            var nameBody = msgInfo.sender.username;
            if(msgInfo.sender.isBot())
                nameBody = $element(
                    'span',
                    { className: 'botName' },
                    nameBody,
                );

            var messageBody = [
                $element(
                    'span',
                    { className: 'date' },
                    '(' + msgInfo.created.toLocaleTimeString() + ')',
                ),
                ' ',
                $element('span', {
                    style: nameStyle,
                    onclick: function() {
                        watchers.call('nameInsert', msgInfo, [msgInfo]);
                    },
                }, nameBody),
            ];

            if(msgInfo.showColon)
                messageBody.push($element(
                    'span',
                    { className: 'msgColon' },
                    ':',
                ));

            if(msgInfo.isAction) {
                if(msgInfo.bodyText.indexOf("'") !== 0 || (msgInfo.bodyText.match(/\'/g).length % 2) === 0)
                    messageBody.push(' ');
            } else {
                messageBody.push(' ');
                messageBody.push($element(
                    'span',
                    { className: 'msgBreak' },
                    $element('br'),
                ));
            }

            if(msgInfo.isPM) {
                if(msgInfo.pmTargetName)
                    messageBody.push($element(
                        'i', {},
                        AmiStrings.getMenuString('whisperto', msgInfo.pmTargetName),
                    ));
                else
                    messageBody.push($element(
                        'i', {},
                        AmiStrings.getMenuString('whisper'),
                    ));
                messageBody.push(' ');
            }

            var message = $element('div', {
                id: idPfx + msgInfo.id,
                className: isEven ? 'rowEven' : 'rowOdd'
            }, ...messageBody);

            let msgBodyTarget = message;
            if(msgInfo.isAction)
                message.appendChild(msgBodyTarget = $element('i'));
            msgBodyTarget.insertAdjacentHTML('beforeend', msgInfo.bodyRaw);

            if(msgInfo.canDelete)
                message.appendChild($element('a', {
                    title: 'Delete this message',
                    className: 'sprite-small sprite-delete',
                    style: {
                        float: 'right',
                        margin: '2px 0 0 0',
                    },
                    onclick: function() {
                        watchers.call('delete', msgInfo, [msgInfo]);
                    },
                }));

            isEven = !isEven;
            container.appendChild(message);

            return message;
        },
        remove: function(msgId) {
            const elem = $id(idPfx + msgId);
            if(elem)
                elem.parentNode.removeChild(elem);
            reflow();
        },
        clear: function() {
            $removeChildren(container);
            isEven = true;
        },
        reflow: reflow,
        showSideBar: function(type) {
            container.classList[type === 'wide' ? 'add' : 'remove']('wideSideVisible');
            container.classList[type === 'thin' ? 'add' : 'remove']('userListVisible');
            container.classList[type === 'none' ? 'add' : 'remove']('fullWidth');
        },
        scrollToBottom: function() {
            container.scrollTop = container.scrollHeight;
        },
        watch: function(name, watcher) {
            watchers.watch(name, watcher);
        },
        unwatch: function(name, watcher) {
            watchers.unwatch(name, watcher);
        },
    };
};