function postNUI(event, data) {
    $.post('https://' + GetParentResourceName() + '/' + event, JSON.stringify(data || {}));
}

var app = new Vue({
    el: '#app',
    data: {
        show:        false,
        showAdmin:   false,
        isAdmin:     false,
        bikes:       [],
        selected:    null,
        claimed:     false,
        claimedModel: null,
        npc: {
            model:   'a_m_m_beach_01',
            x:       0,
            y:       0,
            z:       0,
            heading: 0
        }
    },
    methods: {
        close: function() {
            this.show = false;
            this.showAdmin = false;
            this.selected = null;
            postNUI('close');
        },
        claimBike: function() {
            if (!this.selected) return;
            postNUI('claimBike', { model: this.selected });
        },
        selectBike: function(model) {
            this.selected = this.selected === model ? null : model;
        },
        openAdmin: function() {
            this.showAdmin = true;
        },
        closeAdmin: function() {
            this.showAdmin = false;
            postNUI('close');
        },
        capturePos: function() {
            postNUI('capturePos', {});
        },
        saveNPC: function() {
            postNUI('saveNPC', {
                model:   this.npc.model,
                x:       this.npc.x,
                y:       this.npc.y,
                z:       this.npc.z,
                heading: this.npc.heading
            });
        }
    }
});

window.addEventListener('message', function(event) {
    var msg = event.data;
    switch (msg.action) {
        case 'OPEN':
            app.show      = true;
            app.showAdmin = false;
            app.bikes     = msg.bikes || [];
            app.isAdmin   = msg.isAdmin || false;
            app.selected  = null;
            break;
        case 'OPEN_ADMIN':
            app.show      = true;
            app.showAdmin = true;
            app.isAdmin   = true;
            if (msg.captured) {
                app.npc.x       = Math.round(msg.captured.x * 100) / 100;
                app.npc.y       = Math.round(msg.captured.y * 100) / 100;
                app.npc.z       = Math.round(msg.captured.z * 100) / 100;
                app.npc.heading = Math.round(msg.captured.heading * 100) / 100;
            }
            break;
        case 'CLOSE':
            app.show = false;
            app.showAdmin = false;
            break;
        case 'SET_ADMIN':
            app.isAdmin = msg.isAdmin;
            break;
        case 'SET_CLAIM_STATUS':
            app.claimed      = msg.claimed;
            app.claimedModel = msg.model || null;
            break;
    }
});

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && app.show) {
        app.close();
    }
});