window.APP = {
    template: '#app_template',
    name: 'app',
    data() {
        return {
            style: CONFIG.style,
            showInput: false,
            showWindow: false,
            suggestions: [],
            templates: CONFIG.templates,
            message: '',
            messages: [],
            oldMessages: [],
            oldMessagesIndex: -1,
        };
    },
    destroyed() {
        clearInterval(this.focusTimer);
        window.removeEventListener('message', this.listener);
    },
    mounted() {
        post('https://pdchat/loaded', JSON.stringify({}));
        this.listener = window.addEventListener('message', (event) => {
            const item = event.data || event.detail; //'detail' is for debuging via browsers
            if (this[item.type]) {
                this[item.type](item);
            }
        });
    },
    watch: {
        messages() {
            if (this.showWindowTimer) {
                clearTimeout(this.showWindowTimer);
            }
            this.showWindow = true;
            this.resetShowWindowTimer();

            const messagesObj = this.$refs.messages;
            this.$nextTick(() => {
                messagesObj.scrollTop = messagesObj.scrollHeight;
            });
        },
    },
    methods: {
        ON_OPEN() {
            this.showInput = true;
            this.showWindow = true;
            if (this.showWindowTimer) {
                clearTimeout(this.showWindowTimer);
            }
            this.focusTimer = setInterval(() => {
                if (this.$refs.input) {
                    this.$refs.input.focus();
                } else {
                    clearInterval(this.focusTimer);
                }
            }, 100);
        },
        ON_MESSAGE({ message }) {
            this.messages.push(message);
        },
        ON_CLEAR() {
            this.messages = [];
            this.oldMessages = [];
            this.oldMessagesIndex = -1;
        },
        ON_SUGGESTION_ADD({ suggestion }) {
            if (!suggestion.params) {
                suggestion.params = []; //TODO Move somewhere else
            }
            if (this.suggestions.find(a => a.name == suggestion.name)) {
                return;
            }
            this.suggestions.push(suggestion);
        },
        ON_SUGGESTION_REMOVE({ name }) {
            this.suggestions = this.suggestions.filter((sug) => sug.name !== name)
        },
        ON_TEMPLATE_ADD({ template }) {
            if (this.templates[template.id]) {
                this.warn(`Tried to add duplicate template '${template.id}'`)
            } else {
                this.templates[template.id] = template.html;
            }
        },
        warn(msg) {
            this.messages.push({
                args: [msg],
                template: '^3<b>CHAT-WARN</b>: ^0{0}',
            });
        },
        clearShowWindowTimer() {
            clearTimeout(this.showWindowTimer);
        },
        resetShowWindowTimer() {
            this.clearShowWindowTimer();
            this.showWindowTimer = setTimeout(() => {
                if (!this.showInput) {
                    this.showWindow = false;
                }
            }, CONFIG.fadeTimeout);
        },
        keyUp() {
            this.resize();
        },
        keyDown(e) {
            if (e.which == 9 && this.$refs.suggs.currentSuggestions.length > 0) {
                e.preventDefault();
                this.message = this.$refs.suggs.currentSuggestions[0].name;
            }
            if (e.which === 38 || e.which === 40) {
                e.preventDefault();
                this.moveOldMessageIndex(e.which === 38);
            } else if (e.which == 33) {
                var buf = document.getElementsByClassName('chat-messages')[0];
                buf.scrollTop = buf.scrollTop - 100;
            } else if (e.which == 34) {
                var buf = document.getElementsByClassName('chat-messages')[0];
                buf.scrollTop = buf.scrollTop + 100;
            }
        },
        moveOldMessageIndex(up) {
            if (up && this.oldMessages.length > this.oldMessagesIndex + 1) {
                this.oldMessagesIndex += 1;
                this.message = this.oldMessages[this.oldMessagesIndex];
            } else if (!up && this.oldMessagesIndex - 1 >= 0) {
                this.oldMessagesIndex -= 1;
                this.message = this.oldMessages[this.oldMessagesIndex];
            } else if (!up && this.oldMessagesIndex - 1 === -1) {
                this.oldMessagesIndex = -1;
                this.message = '';
            }
        },
        resize() {
            const input = this.$refs.input;
            input.style.height = '5px';
            input.style.height = `${input.scrollHeight + 2}px`;
        },
        send(e) {
            post('https://pdchat/chatResult', JSON.stringify({
                message: this.message,
            }));
            this.oldMessages.unshift(this.message);
            this.oldMessagesIndex = -1;
            this.hideInput();
        },
        hideInput(canceled = false) {
            if (canceled) {
                post('https://pdchat/chatResult', JSON.stringify({ canceled }));
            }
            this.message = '';
            this.showInput = false;
            clearInterval(this.focusTimer);
            this.resetShowWindowTimer();
        },
        Force_Close_Chat() {
            this.message = '';
            this.showInput = false;
            clearInterval(this.focusTimer);
            this.resetShowWindowTimer();
        }
    },
};