// 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(stream); // Answer the call with an A/V stream.
  renderVideo(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, 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 stream;
let startLocalStream = () => {
  navigator.mediaDevices.getUserMedia({video: true, audio: true})
    .then((localStream) => {
      console.log('LOCAL STREAM', localStream);
      renderVideo(localStream, '#localVideo');
      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;