//$(document).foundation()

Vue.component('modal', {
    template: '#modal-template'
})

var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app, #image-modal',
    data: {
        mode: state,
        items: data,
        currentItem: false,
        showModal: false
    },
    created: function () {
        window.addEventListener('keyup', this.handleKeyup);
    },
    methods: {
        detailPopup: function (itm, event) {
            // `this` inside methods points to the Vue instance
            this.currentItem = itm;
            this.showModal = true;
        },
        approveItem: function (id) {
            var req = new XMLHttpRequest();
            req.addEventListener("load", function () {
                console.log("Approved ID " + id);
            });
            req.open("POST", "/admin/approve/" + id);
            req.send();
            this.showModal = false;
            var index = this.items.indexOf(this.currentItem);
            if (index > -1) {
                this.items.splice(index, 1);
            }
        },
        rejectItem: function (id) {
            var req = new XMLHttpRequest();
            req.addEventListener("load", function () {
                console.log("Rejected ID " + id);
            });
            req.open("POST", "/admin/reject/" + id);
            req.send();
            this.showModal = false;
            var index = this.items.indexOf(this.currentItem);
            if (index > -1) {
                this.items.splice(index, 1);
            }
        },
        handleKeyup: function (event) {
            if (this.showModal) {
                enter       = 13;
                backspace   = 8;
                remove      = 46;
                esc         = 27;
                if (event.keyCode === enter) {
                    if (this.mode === 1) {
                        return;
                    }
                    this.approveItem(this.currentItem.ID);
                } else if (event.keyCode === backspace || event.keyCode === remove) {
                    if (this.mode === 2) {
                        return;
                    }
                    this.rejectItem(this.currentItem.ID);
                } else if (event.keyCode === esc) {
                    this.showModal = false;
                }
            }
        }
    }
})

var exampleSocket = new WebSocket("ws://127.0.0.1:8000/ws");
exampleSocket.onopen = function (event) {
	console.log("WS: Connection open!");
	console.log("Proto: " + exampleSocket.protocol);
};
exampleSocket.onmessage = function (event) {
    item = JSON.parse(event.data);
    if (item.State === state) {
        app.items.push(item);
    }
}