/* eslint no-console: 0 */
/* eslint-env browser */
/* global mqtt */

// see https://github.com/mcollina/mosca/wiki/MQTT-over-Websockets

const mqttTopic = '/mosca-playground/messages';
const messagesNode = document.querySelector('#messages');
const newMessageForm = document.querySelector('#newMessageForm');
const newMessageInput = document.querySelector('#newMessageInput');
const client = mqtt.connect();

// method to append messages to the stream
const addMessage = msg => {
  const el = document.createElement('li');
  el.innerText = msg;
  messagesNode.append(el);
};

// form listener to post new messages
newMessageForm.addEventListener('submit', ev => {
  ev.preventDefault();

  // publish the message
  client.publish(mqttTopic, newMessageInput.value, { retain: true });

  // clear the input
  newMessageInput.value = '';
});

// subscribe and setup message action
client.subscribe(mqttTopic);
client.on('message', (_, payload) => addMessage(payload));