const TEMPLATE = document.createElement("template")
TEMPLATE.innerHTML = `
<div class="talk-calendar">
    <span class="talk-start-date"></span>
    <time class="talk-start-time"></time>
    &rarr;
    <time class="talk-end-time"></time>
</div>
<h3 class="talk-title"></h3>
<p class="talk-abstract"></p>
<p><small class="track-name"></small></p>
`

class TalkElement extends HTMLElement {

    #activeChackInterval
    
    srcObject

    connectedCallback(){
        this.updateContent()
        this.#activeChackInterval = setInterval(this.updateActiveState.bind(this), 1000)
    }

    disconnectedCallback(){
        clearInterval(this.#activeChackInterval)
    }

    updateActiveState(){
        this.classList.toggle("active", this.srcObject?.isActive)
    }

    updateContent(){
        if(!this.srcObject){
            this.replaceChildren()
        }

        this.dataset.trackId = this.srcObject.track_id

        this.replaceChildren(TEMPLATE.content.cloneNode(true))
        this.querySelector(".talk-title").textContent = this.srcObject.title
        this.querySelector(".talk-abstract").textContent = this.srcObject.abstract
        this.querySelector(".track-name").textContent = this.srcObject.track.fr

        let timeFormatter = new Intl.DateTimeFormat("fr-FR", {
            timeStyle: "short"
        })

        let dateFormatter = new Intl.DateTimeFormat("fr-FR", {
            dateStyle: "short"
        })

        this.querySelector(".talk-start-date").textContent = dateFormatter.format(this.srcObject.startTime)
        this.querySelector(".talk-start-time").textContent = timeFormatter.format(this.srcObject.startTime)
        this.querySelector(".talk-start-time").datetime = this.srcObject.startTime.toJSON()
        this.querySelector(".talk-end-time").textContent = timeFormatter.format(this.srcObject.endTime)
        this.querySelector(".talk-end-time").datetime = this.srcObject.endTime.toJSON()

        this.updateActiveState()
    }

}

customElements.define("camp-talk", TalkElement)