import { createGridLineCanvas } from '../components/gridlines.js'
import { getLoggedUser } from '../index.js'
import { createSeatWidget } from '../components/seats-widget.js'
import { createClock } from '../components/clock.js'
import { attachTooltip } from '../components/tooltip.js'

const elClock = document.querySelector('#clock')

const elLoggedLabel = document.querySelector('#logged-label')
const elLoginLabel = document.querySelector('#login-label')
const elLogoutLabel = document.querySelector('#logout-label')

const elLogoutButton = document.querySelector('#logout-button')

const elRoomGrid = document.querySelector('.room-grid')

async function logout() {
    await fetch('/api/logout', { method: 'POST' })
    location.href = '/'
}

async function main() {
    const urlSearchParams = new URLSearchParams(window.location.search)
    const params = Object.fromEntries(urlSearchParams.entries())
    console.log(params)

    elLogoutButton.addEventListener('click', () => logout())

    const user = await getLoggedUser()

    if (user) {
        elLoginLabel.classList.add('hidden')

        elLoggedLabel.innerText =
            '@' + user.id + (user.permissions.length > 0 ? ` (${user.permissions.join(', ')})` : '')
        elLoggedLabel.classList.remove('hidden')

        elLogoutLabel.classList.remove('hidden')
    }

    // Widgets
    // createClock(elClock)
    createGridLineCanvas(elRoomGrid)
    createSeatWidget(elRoomGrid, 'aula-stud')

    // Use tooltips only on desktop
    if (matchMedia('(pointer: fine)').matches) {
        attachTooltip()
    }
}

main()