const loginDiv = document.querySelector('#loginDiv')
const loginInput = document.querySelector('#loginInput')
const loginBt = document.querySelector('#loginBt')

const connectDiv = document.querySelector('#connectDiv')
const callInput = document.querySelector('#callInput')
const callBt = document.querySelector('#callBt')
const videoInput = document.querySelector('#videoInput')

const videoDiv = document.querySelector('#videoDiv')
const videoTitle = document.querySelector('#videoTitle')
const remoteVideo = document.querySelector('#video')
const disconnectBt = document.querySelector('#disconnectBt')

const loadDiv = document.querySelector('#loadDiv')

var stream

loginDiv.style.display = 'block'

loginBt.addEventListener('click', function (event) { 
  name = loginInput.value
   
  if (name.length > 0) { 
    send({ 
      type: 'login', 
      name: name 
    })
  }
})

callBt.addEventListener('click', function () { 
  var callToUsername = callInput.value;
    
  if (callToUsername.length > 0) {
    makeOffer(callToUsername)
    loadDiv.style.display = 'block'
    connectDiv.style.display = 'none'
  }
})

disconnectBt.addEventListener('click', function () { 
  send({ 
    type: 'leave',
    name: name
  })
  handleLeave()
  videoDiv.style.display = 'none'
  loginDiv.style.display = 'block'
})

videoInput.addEventListener('change', function (event) {
  remoteVideo.src = URL.createObjectURL(this.files[0])

  videoDiv.style.display = 'block'
  connectDiv.style.display = 'none'
  videoTitle.innerHTML = name + ' | ' + connections.size + ' user connected'
})

remoteVideo.onplay = function () {
  console.log('ADD STREAM')
  if(remoteVideo.mozCaptureStream()) stream = remoteVideo.mozCaptureStream()
  else stream = remoteVideo.captureStream()
}