var msgerChat = null;
var socketurl = 'wss://rpiwss.greinet.com:8083/';

/** Standartnachricht ausgeben und Websocket-Verbindung aufbauen */
window.onload=function(){
  /* DOM-Variablen initialisieren */
  var msgerForm = get(".msger-inputarea");
  var msgerInput = get(".msger-input");
  msgerChat = get(".msger-chat");

  /* Standard Wilkommensnachricht ausgeben */
  appendMessage(BOT_NAME, BOT_IMG, "left", "Hi, wilkommen beim Raspi-Bot!");

  /* Websocket initialisieren */
  var socket = new WebSocket(socketurl, 'chat');
  var username = 'u1'
  socket.onopen = function () {
    username = "name" + Math.floor(Math.random() * Math.floor(700));
    socket.send('{"type": "join", "name":" '+username+'"}');
  }

  /* Aktion bei Nachrichteneingang festlegen */
  socket.onmessage = function (msg) {
    var data = JSON.parse(msg.data);
    if(data.type == 'msg'){
      if(data.name !== "Raspi-Bot" ){   
        appendMessage("Nutzer", PERSON_IMG, "right", data.msg);
      }else{
        appendMessage(BOT_NAME, BOT_IMG, "left", data.msg);
      }
    }
  };

  /* Aktion zum Absenden einer Nachricht festlegen */ 
  msgerForm.addEventListener("submit", event => {
    event.preventDefault();
    const msgText = msgerInput.value;
    if (!msgText) return;
    socket.send('{"type": "msg", "msg": "' + msgerInput.value + '"}');
    msgerInput.value = "";
  });
}

/* Icons und Botname für die Chat-Bubbles */
const BOT_IMG = "https://image.flaticon.com/icons/svg/327/327779.svg";
const PERSON_IMG = "https://image.flaticon.com/icons/svg/145/145867.svg";
const BOT_NAME = "Raspi-Bot";

/**
 * Neue Nachricht ins HTML hinzufügen
 * 
 * @param img for the backround of the bubble
 * @param side eighter left or right
 * @param text the message text
 */
function appendMessage(name, img, side, text) {
  const msgHTML = `
    <div class="msg ${side}-msg">
      <div class="msg-img" style="background-image: url(${img})"></div>

      <div class="msg-bubble">
        <div class="msg-info">
          <div class="msg-info-name">${name}</div>
          <div class="msg-info-time">${formatDate(new Date())}</div>
        </div>

        <div class="msg-text">${text}</div>
      </div>
    </div>
  `;
  msgerChat.insertAdjacentHTML("beforeend", msgHTML);
  msgerChat.scrollTop += 500;
}

/**
 * DOM-Elemente selektieren
 * 
 * @param selector der Selektor (z.B. Klasse oder ID)
 * @param root das Root-Element von dem ausgegangen wird
 * @returns das DOM-Element
 */
function get(selector, root = document) {
  return root.querySelector(selector);
}

/**
 * Formatiert einen Datumswert zum Uhrzeit-Format HH:mm
 * 
 * @param {*} date das Datum
 * @returns die formatierte Uhrzeit
 */
function formatDate(date) {
  const h = "0" + date.getHours();
  const m = "0" + date.getMinutes();
  return `${h.slice(-2)}:${m.slice(-2)}`;
}

/**
 * Gibt eine zufällige ganze Zahl zwischen min und max zurück
 * 
 * @param {*} min die Untergrenze
 * @param {*} max die Obergrenze
 * @returns die Zufallszahl
 */
function random(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}