// replace these values with those generated in your Video API account
var applicationId = "YOUR_APP_ID";
var sessionId = "YOUR_SESSION_ID";
var token = "YOUR_TOKEN";

var session;

initializeSession();

// Handling all of our errors here by alerting them
function handleError(error) {
  if (error) {
    alert(error.message);
  }
}

function initializeSession() {
  session = OT.initSession(applicationId, sessionId);

  // Connect to the session
  session.connect(token, function(error) {
    // If the connection is successful, publish to the session
    if (error) {
      handleError(error);
    }
  });

  // Receive a message and append it to the history
  const msgHistory = document.querySelector('#history');
  session.on('signal:msg', (event) => {
    const msg = document.createElement('p');
    msg.textContent = event.data;
    msg.className = event.from.connectionId === session.connection.connectionId ? 'mine' : 'theirs';
    msgHistory.appendChild(msg);
    msg.scrollIntoView();
  });
}

const form = document.querySelector('form');
const msgTxt = document.querySelector('#msgTxt');

// Send a signal once the user enters data in the form
form.addEventListener('submit', (event) => {
  event.preventDefault();

  session.signal({
    type: 'msg',
    data: msgTxt.value
  }, (error) => {
    if (error) {
      handleError(error);
    } else {
      msgTxt.value = '';
    }
  });
});