var afb = new AFB("api", "mysecret");
var ws;
var evtIdx = 0;
var count = 0;


//**********************************************
// Logger
//**********************************************
var log = {
  command: function (api, verb, query) {
    console.log("subscribe api=" + api + " verb=" + verb + " query=", query);
    var question = urlWS + "/" + api + "/" + verb + "?query=" + JSON.stringify(query);
    log._write("question", count + ": " + log.syntaxHighlight(question));
  },

  event: function (obj) {
    console.log("gotevent:" + JSON.stringify(obj));
    log._write("outevt", (evtIdx++) + ": " + JSON.stringify(obj));
  },

  reply: function (obj) {
    console.log("replyok:" + JSON.stringify(obj));
    log._write("output", count + ": OK: " + log.syntaxHighlight(obj));
  },

  error: function (obj) {
    console.log("replyerr:" + JSON.stringify(obj));
    log._write("output", count + ": ERROR: " + log.syntaxHighlight(obj));
  },

  _write: function (element, msg) {
    var el = document.getElementById(element);
    el.innerHTML += msg + '\n';

    // auto scroll down
    setTimeout(function () {
      el.scrollTop = el.scrollHeight;
    }, 100);
  },

  syntaxHighlight: function (json) {
    if (typeof json !== 'string') {
      json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
      var cls = 'number';
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = 'key';
        } else {
          cls = 'string';
        }
      } else if (/true|false/.test(match)) {
        cls = 'boolean';
      } else if (/null/.test(match)) {
        cls = 'null';
      }
      return '<span class="' + cls + '">' + match + '</span>';
    });
  },
};

//**********************************************
// Generic function to call binder
//***********************************************
function callbinder(api, verb, query) {
  log.command(api, verb, query);

  // ws.call return a Promise
  return ws.call(api + '/' + verb, query)
    .then(function (res) {
      log.reply(res);
      count++;
      return res;
    })
    .catch(function (err) {
      log.reply(err);
      count++;
      throw err;
    });
};

//**********************************************
// Init - establish Websocket connection
//**********************************************
function init(elemID, api, verb, query) {

  function onopen() {
    document.getElementById("main").style.visibility = "visible";
    document.getElementById("connected").innerHTML = "Binder WS Active";
    document.getElementById("connected").style.background = "lightgreen";
    ws.onevent("*", log.event);
  }

  function onabort() {
    document.getElementById("main").style.visibility = "hidden";
    document.getElementById("connected").innerHTML = "Connected Closed";
    document.getElementById("connected").style.background = "red";
  }

  ws = new afb.ws(onopen, onabort);
}

function clearPre(preId) {
  const pre = document.getElementById(preId);
  while (pre && pre.firstChild) {
    pre.removeChild(pre.firstChild);
  }
}

function fetchAndRenderVoiceAgents() {
  const agentsDiv = document.getElementById('agentsDiv');
  while (agentsDiv.firstChild) {
    agentsDiv.removeChild(agentsDiv.firstChild);
  }

  const api = 'vshl';
  const verb = 'enumerateVoiceAgents';
  const query = {};

  log.command(api, verb, query);

  return ws.call(api + '/' + verb, query)
    .then(function (res) {
      log.reply(res);
      for (let index = 0; index < res.response.agents.length; ++index) {
        let voiceAgent = res.response.agents[index];
        addVoiceAgent(agentsDiv, voiceAgent, res.response.default == voiceAgent.id);
      }
    })
    .catch(function (err) {
      log.reply(err);
      console.log(JSON.stringify(err));
    });
}

function addVoiceAgent(containerDiv, voiceAgent, isDefault) {
  const agentDiv = document.createElement("div");

  const agentName = document.createElement("h2");
  agentName.innerHTML = voiceAgent.name;
  agentDiv.appendChild(agentName);

  const agentDescription = document.createElement("p");
  agentDescription.innerHTML = voiceAgent.description;
  agentDiv.appendChild(agentDescription);

  if (!isDefault) {
    const setDefaultBtn = document.createElement("button");
    setDefaultBtn.addEventListener('click', (evt) => {
      const query = {"id": voiceAgent.id};
      callbinder('vshl', 'setDefaultVoiceAgent', query);
      fetchAndRenderVoiceAgents();
    });
    setDefaultBtn.innerHTML = 'SetDefault';
    agentDiv.appendChild(setDefaultBtn);
  }

  const subscribeBtn = document.createElement("button");
  subscribeBtn.addEventListener('click', (evt) => {
    showAgentEventChooserDialog(voiceAgent.id);
  });
  subscribeBtn.innerHTML = 'Subscribe';
  agentDiv.appendChild(subscribeBtn);

  containerDiv.appendChild(agentDiv);
}

function showAgentEventChooserDialog(voiceAgentId) {
  const modal = document.getElementById('agent-event-chooser');
  const subscribeBtn = document.getElementById('agent-subscribe-btn');

  subscribeBtn.addEventListener('click', (evt) => {
    const authState = document.getElementById('authstate').checked;
    const dialogState = document.getElementById('dialogstate').checked;
    const connectionState = document.getElementById('connectionstate').checked;

    const query = {
      "va_id": voiceAgentId,
      "events":[]
    };
    if (authState)
      query.events.push('voice_authstate_event');
    if (dialogState)
      query.events.push('voice_dialogstate_event');
    if (connectionState)
      query.events.push('voice_connectionstate_event');

    callbinder('vshl', 'subscribe', query);
    modal.close();
  });

  // makes modal appear (adds `open` attribute)
  modal.showModal();
}

function showTemplateUIEventChooserDialog() {
  const modal = document.getElementById('templateui-event-chooser');
  const subscribeBtn = document.getElementById('templateui-subscribe-btn');

  subscribeBtn.addEventListener('click', (evt) => {
    const renderTemplate = document.getElementById('render_template').checked;
    const clearTemplate = document.getElementById('clear_template').checked;
    const renderPlayerInfo = document.getElementById('render_player_info').checked;
    const clearPlayerInfo = document.getElementById('clear_player_info').checked;

    const query = {"actions":[]};

    if (renderTemplate)
      query.actions.push('render_template');
    if (clearTemplate)
      query.actions.push('clear_template');
    if (renderPlayerInfo)
      query.actions.push('render_player_info');
    if (clearPlayerInfo)
      query.actions.push('clear_player_info');

    callbinder('vshl', 'guiMetadata/subscribe', query);
    modal.close();
  });

  // makes modal appear (adds `open` attribute)
  modal.showModal();
}