(function() {

    "use strict";

    // Consts
    // /////////////////////////////////////////////////////////////////////////
    var EVENT_BRIDGE_OPEN_MESSAGE = "eventBridgeOpen",
        UPDATE_UI = "update_ui",
        LISTEN_TOGGLE = "listen_toggle",
        BAN = "ban",
        MUTE = "mute",
        EVENTBRIDGE_SETUP_DELAY = 200;

    // Components
    // /////////////////////////////////////////////////////////////////////////
    Vue.component('user', {
        props: {
            user: { type: Object}
        },
        methods: {
            listenToggle(){
                EventBridge.emitWebEvent(JSON.stringify({
                    type: LISTEN_TOGGLE,
                    value: this.user
                }));
            },
            ban(){
                EventBridge.emitWebEvent(JSON.stringify({
                    type: BAN,
                    value: this.user
                }));
            },
            mute(){
                EventBridge.emitWebEvent(JSON.stringify({
                    type: MUTE,
                    value: this.user
                }));
            }
        },
        template:`
            <table>
                <tr>
                    <td>{{ user.userName }}</td>
                    <td>{{ user.avgAudioLevel }}</td>
                    <td>{{ user.avgAudioLoudness }}</td>
                </tr>
                <tr>
                    <td><button class="btn-sm mt-1 mr-1" v-bind:class="{ 'btn-primary': !user.isToggled, 'btn-warning': user.isToggled }"  v-on:click="listenToggle()">Listen Toggle</button></td>
                    <td><button class="btn-sm btn-primary mt-1 mr-1"  v-on:click="mute()">Mute</button></td>
                    <td><button class="btn-sm btn-primary mt-1 mr-1"  v-on:click="ban()">Ban</button></td>
                </tr>
            </table>
        `
    })

    // App
    // /////////////////////////////////////////////////////////////////////////
    var app = new Vue({
        el: '#app',
        data: {
            settings: {
                ui: {
                    currentDance: false,
                    danceList: false
                }
            }
        }
    });

    // Procedural
    // /////////////////////////////////////////////////////////////////////////
    function onScriptEventReceived(message) {
        var data;
        try {
            data = JSON.parse(message);
            switch (data.type) {
                case UPDATE_UI:
                    app.settings = data.value;
                    break;
                default:
            }
        } catch (e) {
            console.log(e)
            return;
        }
    }
    
    function onLoad() {
        
        // Initial button active state is communicated via URL parameter.
        // isActive = location.search.replace("?active=", "") === "true";

        setTimeout(function () {
            // Open the EventBridge to communicate with the main script.
            // Allow time for EventBridge to become ready.
            EventBridge.scriptEventReceived.connect(onScriptEventReceived);
            EventBridge.emitWebEvent(JSON.stringify({
                type: EVENT_BRIDGE_OPEN_MESSAGE
            }));
            EventBridge.emitWebEvent(JSON.stringify({
                type: SET_ACTIVE_MESSAGE,
                value: true
            }));
        }, EVENTBRIDGE_SETUP_DELAY);
    }

    // App
    // /////////////////////////////////////////////////////////////////////////    
    onLoad();

}());