const Y = require("yjs")
require("y-memory")(Y)
require("y-array")(Y)
require("y-text")(Y)
require("./y-webrtc")(Y)

Y({
  db: {
    name: "memory"
  },
  connector: {
    name: "webrtc",
    host: "localhost",
    port: 3000,
    path: "/api"
  },
  share: {
    textfield: "Text"
  }
}).then(y => {
  y.share.textfield.bind(document.getElementById("textfield"))

  const userIDElem = document.getElementById("user-id")
  const peerIDElem = document.getElementById("peer-id")
  const peerButton = document.getElementById("peer-connect")
  const connectedP = document.getElementById("connected-peers")

  userIDElem.value = y.db.userId

  y.connector.onUserEvent(function(event) {
    switch (event.action) {
      case "userID":
        userIDElem.value = event.id
        break
      case "userJoined":
        var peerElem = document.createElement("li")
        peerElem.innerHTML = event.user
        connectedP.appendChild(peerElem)
        break
      case "userLeft":
        for (var peer of connectedP.children) {
          if (peer.innerHTML == event.user) {
            connectedP.removeChild(peer)
          }
        }
        break
    }
  })

  peerButton.onclick = function() {
    const peerID = peerIDElem.value

    if (peerID == "") {
      return
    }

    y.connector.connectToPeer(peerID)

    peerIDElem.value = ""
  }
})