const tournaments = JSON.parse(document.getElementById('tournaments_list').textContent)
const sockets = {}

const messages = document.getElementById('messages')

document.addEventListener('DOMContentLoaded', () => {
    for (let tournament of tournaments) {
        let socket = new WebSocket(
            'ws://' + window.location.host + '/ws/draw/' + tournament.id + '/'
        )
        sockets[tournament.id] = socket

        function addMessage(message, type, timeout = 0) {
            const wrapper = document.createElement('div')
            wrapper.innerHTML = [
                `<div class="alert alert-${type} alert-dismissible" role="alert">`,
                `<div>${message}</div>`,
                '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
            ].join('\n')
            messages.append(wrapper)

            if (timeout)
                setTimeout(() => wrapper.remove(), timeout)
        }

        function draw_start(data) {
            fetch(`/draw/content/${tournament.id}/`).then(resp => resp.text()).then(text => {
                document.getElementById(`tab-${tournament.id}-pane`).innerHTML = text
            })
        }

        socket.addEventListener('message', e => {
            const data = JSON.parse(e.data)
            console.log(data)

            switch (data.type) {
                case 'alert':
                    addMessage(data.message, data.alert_type)
                    break
                case 'draw_start':
                    draw_start(data)
            }
        })

        socket.addEventListener('close', e => {
            console.error('Chat socket closed unexpectedly')
        })

        socket.addEventListener('open', e => {})

        document.getElementById('format-form-' + tournament.id)
            .addEventListener('submit', function (e) {
            e.preventDefault()

            socket.send(JSON.stringify({
                'type': 'start_draw',
                'fmt': document.getElementById('format-' + tournament.id).value
            }))
        })
    }
})