const startStream = function (streamKey) {
    const pc = new RTCPeerConnection({
        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    })

    pc.oniceconnectionstatechange = e => console.log(e)
    pc.onicecandidate = e => {
        console.log("Adding ice candidate: " + e.candidate);
        if (!e.candidate) {
            console.log("Done adding candidates. Creating offer.");
            fetch("/whip/tjuice", {
                method: "POST",
                body: pc.localDescription.sdp
            }).then(resp => {
                resp.text().then(text => {
                    var answer = {
                        type: "answer",
                        sdp: text
                    }
                    try {
                        console.log("Setting remote description.");
                        pc.setRemoteDescription(answer)
                    } catch (e) {
                        console.log("Error setting remote description: " + e)
                    }
                })
            });
        }
    }
    pc.createOffer().then(offer => {
        console.log("Setting local description.");
        pc.setLocalDescription(offer)
    })
    pc.addTransceiver('video')
    pc.addTransceiver('audio')

    pc.ontrack = function (event) {
        console.log(event)
        const el = document.getElementById('video1')
        var ms = new MediaStream()
        event.streams.forEach(s => {
            const tracks = s.getTracks()
            tracks.forEach(t => {
                ms.addTrack(t)
            })
        })

        el.srcObject = ms
        el.autoplay = true
        el.controls = true
    }
}

displayStreams = function () {
    fetch("/whip").then(resp => {
        resp.json().then(streamList => {
            for (const element of streamList) {
                const ol = document.getElementById("streamList")
                var entry = document.createElement("li")
                var a = document.createElement("a")
                a.onclick = _ => startStream(element)
                a.append(document.createTextNode(element))
                entry.appendChild(a)
                ol.appendChild(entry)
            }
        })
    })
}

window.onload = function (ev) {
    console.log(ev)
    displayStreams()
}