const socket = io("/")
const videos = document.getElementById("videos")
const myPeer = new Peer()
const myVideo = document.createElement("video")

myVideo.muted = true

const connectToNewUser = (userId, stream) => {
    const call = myPeer.call(userId, stream)
    const video = document.createElement("video")

    call.on("stream", (userVideoStream) =>
        addVideoStream(video, userVideoStream)
    )

    call.on("close", () => video.remove())
}

const addVideoStream = (video, stream) => {
    video.srcObject = stream
    video.addEventListener("loadedmetadata", () => video.play())
    videos.append(video)
}

navigator.mediaDevices
    .getUserMedia({
        video: true,
        audio: true,
    })
    .then((stream) => {
        addVideoStream(myVideo, stream)
        myPeer.on("call", (call) => {
            call.answer(stream)
            const video = document.createElement("video")
            // const fullscreen = document.createElement("button")
            // fullscreen.dataset.id =
            call.on("close", () => video.remove())
            call.on("stream", (userVideoStream) =>
                addVideoStream(video, userVideoStream)
            )
        })

        socket.on("user-connected", (userId) =>
            connectToNewUser(userId, stream)
        )
    })

socket.on("user-disconnected", (userId) => {
    const call = myPeer.connections[userId]
    if (call) call[0].close()
})

myPeer.on("open", (id) => socket.emit("join-room", ROOM_ID, id))