import * as querystring from "querystring";
import * as async from "async";

let qs = querystring.parse(window.location.search.slice(1));
let info = { projectId: qs.project };

let socket = SupClient.connect(info.projectId);
socket.on("welcome", onWelcome);

function onWelcome(clientId: number, config: { buildPort: number; systemId: string; }) {
  SupClient.fetch("/systems/" + config.systemId + "/plugins.json", "json", (err: Error, pluginsInfo: SupCore.PluginsInfo) => {
    if (err) {
      console.error(err);
      return;
    }
    async.each(pluginsInfo.list, (pluginName: string) => {
      // pluginName = vendorname/shortpluginname   
      let pluginDocUrl = "/systems/"+config.systemId+"/plugins/"+pluginName+"/docs";
      
      let pluginData = pluginName.split("/");
      let vendorName = pluginData[0];
      let shortPluginName = pluginData[1];

      SupClient.fetch(pluginDocUrl, "text", (err: Error, a: any) => {
        if (err != null) return;
        
        buildVendorSection(vendorName);
        buildPluginLink(vendorName, shortPluginName, pluginDocUrl);

        SupClient.fetch(pluginDocUrl + "/manifest.json", "json", (err: Error, manifest: any) => {
          buildVendorSection(vendorName, manifest);
          buildPluginLink(vendorName, shortPluginName, null, manifest);
        });
      });
    }); // end loop plugins
  });
}

let navListElt = document.querySelector("nav ul");

function buildVendorSection(vendorName: string, manifest?: any) {
  let vendorLiElt = document.getElementById(vendorName);
  let vendorUlElt: HTMLUListElement;
  let vendorSpanElt: HTMLSpanElement;

  if (vendorLiElt == null) {
    vendorLiElt = document.createElement("li"); // vendor li
    vendorLiElt.id = vendorName;

    // vendor name
    let vendorSpanElt = document.createElement("span");
    vendorSpanElt.id = vendorName + "-name";
    vendorSpanElt.textContent = vendorName;
    vendorLiElt.appendChild(vendorSpanElt);

    // vendor's plugin list
    vendorUlElt = document.createElement("ul");
    vendorUlElt.id = vendorName+"-plugins";
    vendorLiElt.appendChild(vendorUlElt);

    navListElt.appendChild(vendorLiElt);
  }

  if (manifest != null) {
    if (vendorSpanElt == null)
      vendorSpanElt = document.getElementById(vendorName + "-name");;

    if (manifest.vendorUrl != null) {
      let vendorAElt: any = document.querySelector("#"+vendorName+" span a");

      if (vendorAElt == null) {     
        vendorAElt = document.createElement("a");
        vendorAElt.target = "_blank";
        vendorSpanElt.textContent = null;
        vendorSpanElt.appendChild(vendorAElt);
      }

      vendorAElt.href = manifest.vendorUrl;
      vendorAElt.title = "Go to " + manifest.vendorUrl;
      
      if (manifest.vendorName != null)
        vendorName = manifest.vendorName;
      vendorAElt.textContent = vendorName;
    }
    else if (manifest.vendorName != null) {
      vendorSpanElt.textContent = manifest.vendorName;
    }
  }
}

function buildPluginLink(vendorName: string, pluginName: string, pluginDocUrl?: string, manifest?: any) {
  let vendorUlElt = document.getElementById(vendorName+"-plugins");
  let pluginLiElt = document.getElementById(vendorName+"-"+pluginName);
  
  if (pluginLiElt == null) {
    pluginLiElt = document.createElement("li");
    pluginLiElt.id = vendorName+"-"+pluginName    
    vendorUlElt.appendChild(pluginLiElt);
    
    let anchorElt: any = document.createElement("a"); // plugin link
    pluginLiElt.appendChild(anchorElt);
    
    anchorElt.id = "link-" + vendorName+pluginName;
    anchorElt.docRelPath = pluginDocUrl;
    anchorElt.href = "#" + vendorName+pluginName;
    anchorElt.textContent = pluginName;
  }

  if (manifest != null && manifest.pluginName != null) {
    let anchorElt = pluginLiElt.firstChild;
    anchorElt.textContent = manifest.pluginName;
  }

  selectFirstLink();
}

// handle clicks on the "links"
let iframe: any = document.querySelector("iframe");

navListElt.addEventListener("click", function(event: any) {
  // don't do anything if the element isn't a plugin link
  if (event.target.docRelPath === undefined)
    return;

  let activeElt = navListElt.querySelector("li a.active");
  if (activeElt != null)
    activeElt.classList.remove("active");
  event.target.classList.add("active");
  iframe.src = event.target.docRelPath;
});

// select the first item in the list
function selectFirstLink() {
  let a: any = navListElt.querySelector("li li a");
  if (a.className.indexOf("active") === -1) {
    a.classList.add("active");
    iframe.src = a.docRelPath;
  }
};