import { getUpcomingTalksForRoom } from "../pretalx.js"

class UpcomingTalksElement extends HTMLElement {
    #roomId
    #loadingPromise

    srcObject = undefined

    get roomId(){
        return this.#roomId
    }

    set roomId(val){
        this.#roomId = val
    }

    connectedCallback(){
        this.updateContent()
    }

    updateContent(){
        if(!this.roomId){
            this.replaceChildren()
            return
        }

        if(!this.srcObject){
            
            if(!this.#loadingPromise){
                this.fetchTalks()
            }

            let loading = document.createElement("div")
            loading.classList.add("loading")
            loading.textContent = "Chargement des événements..."
            this.replaceChildren(loading)

        } else {

            let childrens = []

            for(let talk of this.srcObject){
                let item = document.createElement("camp-talk")
                item.srcObject = talk

                let a = document.createElement("a")
                a.href = talk.displayUrl
                a.target = "_blank"
                a.append(item)

                childrens.push(a)
            }

            this.classList.toggle("empty", childrens.length == 0)
            if(childrens.length == 0){
                let empty = document.createElement("p")
                empty.classList.add("empty")
                empty.textContent = `Aucun événement à venir dans cette salle`
                childrens.push(empty)
            }
            this.replaceChildren(...childrens)

        }

        this.classList.toggle("loading", !this.srcObject && this.#loadingPromise)
    }

    async fetchTalks(){
        let prom = (async () => {
            this.srcObject = await getUpcomingTalksForRoom(this.roomId)
            this.#loadingPromise = null
            this.updateContent()
        })()
        this.#loadingPromise = prom
        await prom
    }

    static observedAttributes = ["room-id"]

    attributeChangedCallback(name, oldVal, newVal){
        switch(name){
            case "room-id":
                this.roomId = newVal
                break;
        }
    }

}

customElements.define("camp-upcoming-talks", UpcomingTalksElement);