const { createLocalVideoTrack, connect } = require('twilio-video');
const root = document.getElementById('videochat');
const remoteMedia = document.getElementById('remote-media');
const muteButton = document.getElementById('mute-toggle');
const videoToggleButton = document.getElementById('videohide-toggle');
const localMediaContainer = document.getElementById('local-media');
const roomType = document.getElementById('room-type').dataset.type//Group

connect(root.dataset.token, { name: 'room-name', audio: true, type: roomType, video: { width: 800 } }).then(room => {
  room.participants.forEach(participantConnected);
  room.on('participantConnected', participantConnected);

  room.on('participantDisconnected', participantDisconnected);
  room.once('disconnected', error => room.participants.forEach(participantDisconnected));
  muteButton.onclick = function(e) {
    e.preventDefault();
    room.localParticipant.audioTracks.forEach(function(trackPub) {
      if (muteButton.dataset.muted === 'true') {
        muteButton.dataset.muted = 'false'
        muteButton.classList.remove('crayons-btn--danger');
        muteButton.innerHTML = 'Mute'
        trackPub.track.enable();
      } else {
        muteButton.dataset.muted = 'true'
        muteButton.classList.add('crayons-btn--danger');
        muteButton.innerHTML = 'Unmute'
        trackPub.track.disable();
      }
    });  
  }

  videoToggleButton.onclick = function(e) {
    e.preventDefault();
    room.localParticipant.videoTracks.forEach(function(trackPub) {
      if (videoToggleButton.dataset.hidden === 'true') {
        videoToggleButton.dataset.hidden = 'false'
        videoToggleButton.classList.remove('crayons-btn--danger');
        videoToggleButton.innerHTML = 'Hide';
        localMediaContainer.classList.remove('video-hidden');
        trackPub.track.enable();
      } else {
        videoToggleButton.dataset.hidden = 'true'
        videoToggleButton.classList.add('crayons-btn--danger');
        videoToggleButton.innerHTML = 'Unhide';
        localMediaContainer.classList.add('video-hidden');
        trackPub.track.disable();
      }
    });  
  }

});

createLocalVideoTrack().then(track => {
  localMediaContainer.appendChild(track.attach());
  document.getElementById('video-controls').classList.add('showing');
});


function participantConnected(participant) {
  const numExistingDivs = document.getElementsByClassName('individual-video').length;
  const div = document.createElement('div');
  div.id = participant.sid;
  div.className = "individual-video" + (numExistingDivs > 3 ? " one-of-many-videos" : "")
  div.innerHTML = '<div class="participant-info">\
      <div class="participant-name">'+ participant.identity + '</div>\
      <div class="disabled-audio-indicator">audio off</div>\
      <div class="disabled-video-indicator">video off</div>\
    </div>'

  participant.on('trackSubscribed', track => trackSubscribed(div, track));
  participant.on('trackUnsubscribed', trackUnsubscribed);

  participant.on('trackDisabled', track => trackDisabled(div, track));
  participant.on('trackEnabled', track => trackEnabled(div, track));

  participant.tracks.forEach(publication => {
    if (publication.isSubscribed) {
      trackSubscribed(div, publication.track);
    }
  });
  remoteMedia.appendChild(div);
}

function participantDisconnected(participant) {
  document.getElementById(participant.sid).remove();
}

function trackSubscribed(div, track) {
  div.appendChild(track.attach());
  if (!track.isEnabled) {
    if(track.kind === 'video') {
      div.classList.add('disabled-video')
    } else {
      div.classList.add('disabled-audio')
    }
  }
}

function trackUnsubscribed(track) {
  track.detach().forEach(element => element.remove());
}

function trackDisabled(div, track) {
  if(track.kind === 'video') {
    div.classList.add('disabled-video')
  } else {
    div.classList.add('disabled-audio')
  }
}

function trackEnabled(div, track) {
  if(track.kind === 'video') {
    div.classList.remove('disabled-video')
  } else {
    div.classList.remove('disabled-audio')
  }
}

if (navigator.userAgent === 'DEV-Native-ios') {
  root.innerHTML = '<h2 class="platform-unavailable-message">This feature is not yet available on iPhone</h2>'
}