var app = new Vue({
  el: '#app',
  data: {
    peer: new Peer({
      host: '/',
      path: '/peerjs/myapp'
    }),
    stream: null,
  },
  methods: {
    logMessage: function(message) {
      let newMessage = document.createElement('div');
      newMessage.innerText = message;
      document.querySelector('.messages').appendChild(newMessage);
    },
    renderVideo:function(stream, selector = '#remoteVideo') {
      document.querySelector(selector).srcObject = stream;
    },
    connectToPeer: function() {
      let peerId = this.peer.id;
      this.logMessage(`Connecting to ${peerId}...`);

      let conn = this.peer.connect(peerId);
      conn.on('data', (data) => {
        this.logMessage(`received: ${data}`);
      });
      conn.on('open', () => {
        conn.send('hi!');
      });

      let call = this.peer.call(this.peerId, this.stream);
      call.on('stream', this.renderVideo);
      // navigator.mediaDevices.getUserMedia({video: true, audio: true})
      //   .then((stream) => {
      //     let call = peer.call(peerId, stream);
      //     call.on('stream', renderVideo);
      //   })
      //   .catch((err) => {
      //     logMessage('Failed to get local stream', err);
      //   });
    },
    listenForPeerEvents: function () {
      this.peer.on('open', (id) => {
        this.logMessage('My peer ID is: ' + id);
      });
      this.peer.on('error', (error) => {
        console.error(error);
      });

      // Handle incoming data connection
      this.peer.on('connection', (conn) => {
        this.logMessage('incoming peer connection!');
        console.log('incoming peer connection!', conn);
        conn.on('data', (data) => {
          this.logMessage(`received: ${data}`);
        });
        conn.on('open', () => {
          conn.send('hello!');
        });
        conn.on('close', () => {
          this.logMessage('Connection closed.');
        });
        conn.on('error', (error) => {
          console.error('Error:', error);
          this.logMessage('Error'+error);
        });
      });

      // Handle incoming voice/video connection
      this.peer.on('call', (call) => {
        console.log('INCOMING CALL', call);
        call.answer(window.stream); // Answer the call with an A/V stream.
        this.renderVideo(window.stream, '#localVideo');
        call.on('stream', this.renderVideo);
      });
    },
    gotDevices: function gotDevices(deviceInfos) {
      // Handles being called several times to update labels. Preserve values.
      const values = selectors.map(select => select.value);
      selectors.forEach(select => {
        while (select.firstChild) {
          select.removeChild(select.firstChild);
        }
      });
      for (let i = 0; i !== deviceInfos.length; ++i) {
        const deviceInfo = deviceInfos[i];
        const option = document.createElement('option');
        option.value = deviceInfo.deviceId;
        if (deviceInfo.kind === 'audioinput') {
          option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
          audioInputSelect.appendChild(option);
        } else if (deviceInfo.kind === 'audiooutput') {
          option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
          audioOutputSelect.appendChild(option);
        } else if (deviceInfo.kind === 'videoinput') {
          option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
          videoSelect.appendChild(option);
        } else {
          console.log('Some other kind of source/device: ', deviceInfo);
        }
      }
      selectors.forEach((select, selectorIndex) => {
        if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
          select.value = values[selectorIndex];
        }
      });
    },
    // Attach audio output device to video element using device/sink ID.
    attachSinkId :function attachSinkId(element, sinkId) {
      if (typeof element.sinkId !== 'undefined') {
        element.setSinkId(sinkId)
            .then(() => {
              console.log(`Success, audio output device attached: ${sinkId}`);
            })
            .catch(error => {
              let errorMessage = error;
              if (error.name === 'SecurityError') {
                errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`;
              }
              console.error(errorMessage);
              // Jump back to first output device in the list as it's the default.
              audioOutputSelect.selectedIndex = 0;
            });
      } else {
        console.warn('Browser does not support output device selection.');
      }
    },
    changeAudioDestination: function changeAudioDestination() {
      const audioDestination = audioOutputSelect.value;
      attachSinkId(videoElement, audioDestination);
    },
    gotStream: function gotStream(stream) {
      this.stream = stream; // make stream available to console
      videoElement.srcObject = stream;
      // Refresh button list in case labels have become available
      return navigator.mediaDevices.enumerateDevices();
    },
    handleError: function handleError(error) {
      console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
    },
    start: function start() {
      if (this.stream) {
        this.stream.getTracks().forEach(track => {
          track.stop();
        });
      }
      const audioSource = audioInputSelect.value;
      const videoSource = videoSelect.value;
      const constraints = {
        audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
        video: {deviceId: videoSource ? {exact: videoSource} : undefined}
      };
      navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(this.gotDevices).catch(this.handleError);
    },
  },
  mounted() {
    console.log('VUE is alive!');
    navigator.mediaDevices.enumerateDevices().then(this.gotDevices).catch(this.handleError);
    this.start();
  }
});


// client-side js, loaded by index.html
// run by the browser each time the page is loaded

// let Peer = window.Peer;

// let messagesEl = document.querySelector('.messages');
// let peerIdEl = document.querySelector('#connect-to-peer');
// let videoEl = document.querySelector('#remoteVideo');

// let logMessage = (message) => {
//   let newMessage = document.createElement('div');
//   newMessage.innerText = message;
//   messagesEl.appendChild(newMessage);
// };

// let renderVideo = (stream, selector = '#remoteVideo') => {
//   document.querySelector(selector).srcObject = stream;
// };

// Register with the peer server
// let peer = new Peer({
//   host: '/',
//   path: '/peerjs/myapp'
// });
// peer.on('open', (id) => {
//   logMessage('My peer ID is: ' + id);
// });
// peer.on('error', (error) => {
//   console.error(error);
// });

// // Handle incoming data connection
// peer.on('connection', (conn) => {
//   logMessage('incoming peer connection!');
//   console.log('incoming peer connection!', conn);
//   conn.on('data', (data) => {
//     logMessage(`received: ${data}`);
//   });
//   conn.on('open', () => {
//     conn.send('hello!');
//   });
//   conn.on('close', () => {
//     logMessage('Connection closed.');
//   });
//   conn.on('error', (error) => {
//     console.error('Error:', error);
//     logMessage('Error'+error);
//   })
// });

// // Handle incoming voice/video connection
// peer.on('call', (call) => {
//   console.log('INCOMING CALL', call);
//   call.answer(window.stream); // Answer the call with an A/V stream.
//   renderVideo(window.stream, '#localVideo');
//   call.on('stream', renderVideo);
//   // navigator.mediaDevices.getUserMedia({video: true, audio: true})
//   //   .then((stream) => {
//   //     call.answer(stream); // Answer the call with an A/V stream.
//   //     renderVideo(stream, '#localVideo');
//   //     call.on('stream', renderVideo);
//   //   })
//   //   .catch((err) => {
//   //     console.error('Failed to get local stream', err);
//   //   });
// });

// Initiate outgoing connection
// let connectToPeer = () => {
//   let peerId = peerIdEl.value;
//   logMessage(`Connecting to ${peerId}...`);
  
//   let conn = peer.connect(peerId);
//   conn.on('data', (data) => {
//     logMessage(`received: ${data}`);
//   });
//   conn.on('open', () => {
//     conn.send('hi!');
//   });
  
//   let call = peer.call(peerId, window.stream);
//   call.on('stream', renderVideo);
//   // navigator.mediaDevices.getUserMedia({video: true, audio: true})
//   //   .then((stream) => {
//   //     let call = peer.call(peerId, stream);
//   //     call.on('stream', renderVideo);
//   //   })
//   //   .catch((err) => {
//   //     logMessage('Failed to get local stream', err);
//   //   });
// };

// let startLocalStream = () => {
//   navigator.mediaDevices.getUserMedia({video: true, audio: true})
//     .then((localStream) => {
//       console.log('LOCAL STREAM', localStream);
//       renderVideo(localStream, '#localVideo');
//       window.stream = localStream;
//     })
//     .catch((err) => {
//       console.log('Failed to get local stream', err);
//       logMessage('Failed to get local stream', err);
//     });
// }
// startLocalStream();

// let disconnectFromPeer = () => {
  
// }

// window.disconnectFromPeer = disconnectFromPeer;
// window.connectToPeer = connectToPeer;


  
/*
*  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
*
*  Use of this source code is governed by a BSD-style license
*  that can be found in the LICENSE file in the root of the source
*  tree.
*/

// 'use strict';

const videoElement = document.querySelector('#localVideo');
const audioInputSelect = document.querySelector('select#audioSource');
const audioOutputSelect = document.querySelector('select#audioOutput');
const videoSelect = document.querySelector('select#videoSource');
const selectors = [audioInputSelect, audioOutputSelect, videoSelect];

audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);

// function gotDevices(deviceInfos) {
//   // Handles being called several times to update labels. Preserve values.
//   const values = selectors.map(select => select.value);
//   selectors.forEach(select => {
//     while (select.firstChild) {
//       select.removeChild(select.firstChild);
//     }
//   });
//   for (let i = 0; i !== deviceInfos.length; ++i) {
//     const deviceInfo = deviceInfos[i];
//     const option = document.createElement('option');
//     option.value = deviceInfo.deviceId;
//     if (deviceInfo.kind === 'audioinput') {
//       option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
//       audioInputSelect.appendChild(option);
//     } else if (deviceInfo.kind === 'audiooutput') {
//       option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
//       audioOutputSelect.appendChild(option);
//     } else if (deviceInfo.kind === 'videoinput') {
//       option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
//       videoSelect.appendChild(option);
//     } else {
//       console.log('Some other kind of source/device: ', deviceInfo);
//     }
//   }
//   selectors.forEach((select, selectorIndex) => {
//     if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
//       select.value = values[selectorIndex];
//     }
//   });
// }

// navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);

// // Attach audio output device to video element using device/sink ID.
// function attachSinkId(element, sinkId) {
//   if (typeof element.sinkId !== 'undefined') {
//     element.setSinkId(sinkId)
//         .then(() => {
//           console.log(`Success, audio output device attached: ${sinkId}`);
//         })
//         .catch(error => {
//           let errorMessage = error;
//           if (error.name === 'SecurityError') {
//             errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`;
//           }
//           console.error(errorMessage);
//           // Jump back to first output device in the list as it's the default.
//           audioOutputSelect.selectedIndex = 0;
//         });
//   } else {
//     console.warn('Browser does not support output device selection.');
//   }
// }

// function changeAudioDestination() {
//   const audioDestination = audioOutputSelect.value;
//   attachSinkId(videoElement, audioDestination);
// }

// function gotStream(stream) {
//   window.stream = stream; // make stream available to console
//   videoElement.srcObject = stream;
//   // Refresh button list in case labels have become available
//   return navigator.mediaDevices.enumerateDevices();
// }

// function handleError(error) {
//   console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
// }

// function start() {
//   if (window.stream) {
//     window.stream.getTracks().forEach(track => {
//       track.stop();
//     });
//   }
//   const audioSource = audioInputSelect.value;
//   const videoSource = videoSelect.value;
//   const constraints = {
//     audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
//     video: {deviceId: videoSource ? {exact: videoSource} : undefined}
//   };
//   navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
// }

audioInputSelect.onchange = start;
audioOutputSelect.onchange = changeAudioDestination;

videoSelect.onchange = start;

start();