import { getNextPassage, getVelovBikeState } from "../tcl.js";

const TEMPLATE = document.createElement("template");
TEMPLATE.innerHTML = `
<img class="velov-picto" src="/api/valkyrie/assets/sprites/bike-stations.svg?type=image%2Fsvg%2Bxml" />
<h1 class="station-name"></h1>
<p><span class="bike-available"></span> vélo<span class="plurial">s</span> disponible<span class="plurial">s</span></p>
`

class VelovStationElement extends HTMLElement {
    #station
    #autoupdateTimeout

    get stationId(){
        return this.#station
    }

    set stationId(value){
        this.#station = value
    }

    handleAutoUpdate(){
        clearTimeout(this.#autoupdateTimeout)
        this.updateContent()
        this.#autoupdateTimeout = setTimeout(this.handleAutoUpdate.bind(this), 60000 + ((Math.random() * 10000) - 5000))
    }

    connectedCallback(){
        this.replaceChildren(TEMPLATE.content.cloneNode(true))
        this.handleAutoUpdate()
    }

    async updateContent(){
        try {
            if(!this.stationId)
                throw new Error("Missing station id")

            let station_data = await getVelovBikeState(this.stationId)
            
            this.querySelector(".station-name").textContent = station_data.name
            this.querySelector(".bike-available").textContent = station_data.properties.available_bikes
            this.querySelector(".bike-available").parentElement.classList.toggle("plurial-content", station_data.properties.available_bikes > 1);

            this.style.display = ""
        } catch(e){
            this.style.display = "none"
            throw e
        }
    }

    static observedAttributes = ["station-id"]

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

customElements.define("gavle-velov-station", VelovStationElement);