Vue.component('Modal', {
    template: '#modal-template',
    props: ['show', 'onClose'],
    methods: {
        close: function () {
            this.onClose();
        }
    },

    ready: function () {
        document.addEventListener("keydown", function(e) {
            if (this.show && e.keyCode == 27) {
                this.onClose();
            }
        })
    }
});

var editModal = Vue.component('NewEditModal', {
    template: '#new-edit-modal-template',
    props: ['show'],
    data: function () {
        return {
            id: '',
            title: '',
            body: ''
        };
    },

    methods: {
        close: function () {
            this.show = false;
            this.title = '';
            this.body = '';
            this.id = '';
        },

        refresh: function() {
            this.$dispatch('refreshReports');
        },

        savePost: function () {
            var me = this;

            var dataparams = {
                'id': this.id,
                'name': this.title,
                'description': this.body
            };
            console.log("Updating Post");
            this.$http.post("http://crossorigin.me/http://codepen.io/billmurrin/pen/EKXbyZ.js", dataparams, {
                xhr: {
                    onreadystatechange: function (response) {
                        if (this.readyState === 4) {
                            console.log("Updated Post");
                            console.log(response);
                            console.log(this.status);
                            console.log(this.response);
                            console.log("Sending Refresh Dispatch");
                            setTimeout(function() {
                                me.$dispatch('refreshReports')
                            }, 1500);
                            return;
                        }
                    }
                }
            });
            this.close();
        }
    },

    events: {
        edit_report: function (report) {
            this.id = report.id;
            this.title = report.name;
            this.body = report.description;
            this.show = true;
        }
    }
});

var demoData = [{
  "id": "ASWERDDD",
  "date_added": "2016-03-26",
  "length": "1",
  "name": "Test1",
  "description": "Description Test - Update"
}, {
  "id": "ASWERDAA",
  "date_added": "2016-03-24",
  "length": "1",
  "name": "Test1",
  "description": "Description Test 2 - Update"
}, {
  "id": "ASWERDBB",
  "date_added": "2016-03-25",
  "length": "1",
  "name": "Test1",
  "description": "Description Test 3 - Update"
}]

Vue.component('demo-grid', {
    template: '#grid-template',
    props: {
        list: [],
        columns: [],
        filterKey: String,
    },

    components: {
        'alerta': VueStrap.alert,
        'new-edit-modal': editModal
    },

    data: function () {
        var sortOrders = {};
        this.columns.forEach(function (key) {
            sortOrders[key] = 1
        });

        return {
            gdata: [],
            showRight: false,
            sortKey: '',
            sortOrders: sortOrders,
            showNewEditModal: false
        }
    },

    methods: {
        sortBy: function (key) {
            this.sortKey = key
            this.sortOrders[key] = this.sortOrders[key] * -1
        },

        deleterow: function (report) {
            var dataparams = {
                'id': report.id,
                '_token': "aaaabbbbbbccccccdddddddeeeeeeee"
            };

            this.$http.post("http://crossorigin.me/http://codepen.io/billmurrin/pen/EKXbyZ.js", dataparams,  {
                xhr: {
                    onreadystatechange: function (response) {
                        if (this.readyState === 4) {
                            console.log(this.status);
                            console.log(this.response);
                            return;
                        }
                    }
                }
            });

            alert("This ID would get deleted: " + report.id);
            console.log(report);
            this.gdata.$remove(report);
            this.showRight = !this.showRight;
        },

        editrow: function(report){
            this.$broadcast('edit_report', report);
            showNewEditModal = true
        }
    },

    events: {
        refreshReports: function () {
            var newdata = this;
            console.log("Refreshing reports.");
            this.$http.get("http://crossorigin.me/http://codepen.io/billmurrin/pen/EKXbyZ.js", {}, {
                xhr: {
                    onreadystatechange: function (response) {
                        if (this.readyState === 4) {
                            console.log(this.response);
                            console.log("refreshed");
                            console.log(newdata);
                            newdata.$set('gdata', JSON.parse(this.response));
                            return;
                        }
                    }
                }
            });
        }
    },

    created: function() {
        // Pushing the data to the data property so it's reactive
        this.gdata = this.list;
    },
});

// bootstrap the demo
var demo = new Vue({
    el: '#demo',

    data: {
        searchQuery: '',
        gridColumns: ['id', 'date_added', 'length', 'name', 'description'],
        gridData: demoData
    },
});