import {Theme} from '/src/js/theme.js';

export class MessageListViewController {
    constructor (view, messageService, messageTemplate, configService) {
        this._view = view;
        this._document = view.ownerDocument;
        this._configService = configService;
        this._cssLinkElement = null;
        this._theme = this._loadTheme(this._configService.getThemeName());
        this._applyThemeStyle(this._theme);

        this._messageService = messageService;
        this._messageService.addMessageListener(this._onmessage.bind(this));

        const handlebars = require('handlebars');
        this._messageTemplate = handlebars.compile(messageTemplate);

        this._parser = new DOMParser();

        this._autoScrollThreshold  = 50;

        this._registerHotkeys();
    }

    _loadTheme (name) {
        return new Theme(name);
    }
    
    _registerHotkeys () {
        const option = {
            key : "Ctrl+Shift+Up",
            active : function() {
                console.log("Global desktop keyboard shortcut: " + this.key + " active.");
            },
            failed : function(msg) {
                // :(, fail to register the |key| or couldn't parse the |key|.
                console.log(msg);
            }
        };
    
        const shortcut = new nw.Shortcut(option);
        nw.App.registerGlobalHotKey(shortcut);
    }
    
    _applyThemeStyle (theme) {
        const cssPath = theme.getCssPath();
        if (!cssPath) {
            return;
        }
        if (!this._cssLinkElement) {
            this._cssLinkElement = this._document.createElement("link");
            this._cssLinkElement.setAttribute("rel", "stylesheet");
            this._cssLinkElement.setAttribute("type", "text/css");
            this._cssLinkElement.setAttribute("href", cssPath);

            this._document.getElementsByTagName('head')[0].appendChild(this._cssLinkElement);
        }
    }
    
    _onmessage (message) {
        const isScrollAtBottom = this._view.scrollTop + this._view.clientHeight >= this._view.scrollHeight - this._autoScrollThreshold;

        const messageCopy = Object.assign({}, message);
        messageCopy.rankIcon = this._theme.getRankIconPath(message.rankIcon);
    
        const messageHtml = this._messageTemplate(messageCopy).trim();
        const nodes = this._parser.parseFromString(messageHtml, 'text/html').body.childNodes;

        for (let node of nodes) {
            this._view.appendChild(node);
        }
    
        if (isScrollAtBottom) {
            this._view.scrollTop = this._view.scrollHeight;
        }
    }
}

@@ -749,10 +749,169 @@
   = 
-50
+1;%0A        this._autoScroll = true;%0A%0A        this._view.onscroll = (e =%3E %7B%0A            this._autoScroll = this._scrollPositionIsAtBottom();%0A        %7D).bind(this)
 ;%0A%0A 
@@ -2115,145 +2115,8 @@
 ) %7B%0A
-        const isScrollAtBottom = this._view.scrollTop + this._view.clientHeight %3E= this._view.scrollHeight - this._autoScrollThreshold;%0A%0A
     
@@ -2496,113 +2496,859 @@
 e);%0A
-        %7D%0A    %0A        if (isScrollAtBottom) %7B%0A            this._view.scrollTop = this._view.scrollHeight
+%0A            this._forEachImage(node, img =%3E %7B%0A                img.onload = (function () %7B%0A                    this._scrollIfNeeded();%0A                %7D).bind(this);%0A            %7D);%0A        %7D%0A%0A        this._scrollIfNeeded();%0A    %7D%0A%0A    _scrollPositionIsAtBottom() %7B%0A        return this._view.scrollTop + this._view.clientHeight %3E= this._view.scrollHeight - this._autoScrollThreshold;%0A    %7D%0A%0A    _scrollIfNeeded() %7B%0A        if (this._scrollPositionIsAtBottom()) %7B%0A            return;%0A        %7D%0A%0A        if (this._autoScroll) %7B%0A            this._view.scrollTop = this._view.scrollHeight;%0A        %7D%0A    %7D%0A%0A    _forEachImage(node, func) %7B%0A        if (node instanceof HTMLImageElement) %7B%0A            func(node);%0A        %7D%0A        node = node.firstChild;%0A        while (node) %7B%0A            this._forEachImage(node, func);%0A            node = node.nextSibling
 ;%0A  

Fix auto scrolling