let source_url = ""
let seatRef = document.getElementById("seatRef")
let hemicycle = document.getElementsByClassName("hemicycle")[0]

fetch("https://hub.xpub.nl/soupboat/the-parliament/")
    .then((response) => response.json()) 
    .then((data) => {
        source_url = data.base_url;
        populateSeats(data.files)
    }); 

function populateSeats(representatives) {
    for (const representative of representatives){
        let seat = seatRef.cloneNode(true);
        seat.querySelector(".label").innerHTML = representative.who;
        seat.id = representative.who;
        let filename = source_url + representative.filename;
        let audio = new Audio(filename)
        audio.addEventListener("canplaythrough", (e) => {
            console.log(filename);
            let mic = seat.querySelector(".mic");
            mic.innerHTML = "Talk";
            mic.addEventListener("click", () => {
                console.log(filename);
                if (audio.paused) {
                    audio.play();
                    mic.innerHTML="Pause";
                    mic.style.color ="red";
                } else {
                    audio.pause();
                    mic.innerHTML="Talk"
                }
            });
            audio.addEventListener("ended", () => {
                audio.pause();
                audio.currentTime = 0;
                mic.innerHTML = "Talk Again"
            });
        });
        hemicycle.appendChild(seat);

    }
}