window.onload = function () {
    var app = new Vue({
        el: '#educbot-status',
        data: {
            web_token: '',
            channel_id: '',
            ws: null,
            ws_url: 'ws://localhost:8080',
            reactions: {},
            connection: false,
            message: '',
        },
        created: function () {
            var url = new URL(location.href)
            this.web_token = url.searchParams.get('web_token')
            this.channel_id = url.searchParams.get('channel_id')
            if (this.web_token == '' || this.channel_id == '') {
                console.err('missing parameters to vue instance')
                return
            }
            this.ws = new WebSocket(this.ws_url)
            this.ws.onmessage = (data) => {
                var reactions = JSON.parse(data.data)
                if ('error' in reactions) {
                    this.message = 'Erreur ! ' 
                    if (reactions.error === "bad channel") {
                        this.message += 'Les identifiants sont incorrect ! Redemandez les à Educ-Bot avec la commande "!educpop-web"'
                    }
                    return
                }
                this.reactions = reactions
            }
            this.ws.onopen = () => {
                this.sendWs('init')
                this.connection = true
            }
            this.ws.onclose = () => {
                this.connection = false
            }
            this.ws.onerror = () => {
                this.connection = false
            }
        },
        methods: {
            sendWs: function (action) {
                this.ws.send(JSON.stringify({
                    'action': action,
                    'web_token': this.web_token,
                    'channel': this.channel_id,
                }))
            }
        }
    })
}