/**
 * BBTreeview
 *
 * @suppress {missingProperties}
 * @suppress {undefinedVars}
 */
class BBTreeview {
  constructor(options) {
    this.Options = null;

    this.initialiseComponents(options);
  }


  initialiseComponents(options) {
    var a = this;

    a.Options = Object.assign({
      ID: null,
      ShowCheckbox: false,
      ShowSelection: true,
      EnablePullUp: false,
      ShowIcon: true
    }, options);

    a.createContainer();
  }


  get Container() {
    const a = this;

    let result = document.getElementsByTagName("body");
    if (result.length <= 0) {
      return null;
    }

    result = result[0].querySelectorAll(a.Options.ID);
    if (result.length <= 0) {
      return null;
    }

    if (result[0].querySelectorAll("ul.bbtreeview").length <= 0) {
      result[0].innerHTML = "<ul class=\"bbtreeview\"></ul>";
    }

    result = result[0].querySelectorAll("ul.bbtreeview");
    if (result.length <= 0) {
      return null;
    }

    return result[0];
  }

  AddItem(options) {
    const a = this;
    const _options = a.getOptions(options);

    // Don't add duplicate
    if (a.Find(_options.ID) != null) {
      return false;
    }

    // Check parent exists
    let parentNode = null;
    if (_options.ParentID != null) {
      parentNode = a.Find(_options.ParentID);
      if (parentNode == null) {
        return false;
      }
    }

    if (parentNode == null) {
      parentNode = a.Container;
    } else {
      parentNode = parentNode.GetChildNode();
    }

    if (parentNode == null) {
      return false;
    }

    const nodeHtml = a.generateNodeHtml(_options);

    // Add node
    a.appendHtml(parentNode, nodeHtml);

    // const node = a.Find(_options.ID);

    return true;
  }

  Remove(id) {
    const a = this;

    const node = a.Find(id);
    if (node == null) {
      return false;
    }

    node.Remove();

    return true;
  }

  Clear() {
    const a = this;

    a.initialiseComponents(a.Options);
  }

  CollapseAll() {
    const a = this;

    a.GetAllNodes().forEach(function(e) {
      e.Collapse();
    });
  }

  ExpandAll() {
    const a = this;

    a.GetAllNodes().forEach(function(e) {
      e.Expand();
    });
  }

  CheckAll(value) {
    const a = this;

    if (!a.Options.ShowCheckbox) {
      return;
    }

    a.GetAllNodes().forEach(function(e) {
      e.IsChecked = value;
    });
  }

  Find(id) {
    const a = this;

    if (a.Container == null){
      console.log("BBTreeview container not found");
      return;
    }

    const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']");
    if (node.length <= 0) {
      return null;
    }

    let treenode = new BBTreeviewNode(this);
    treenode.Load(node[0]);

    return treenode;
  }

  FindByName(value) {
    const a = this;

    let response = [];
    a.GetAllNodes().forEach(function(e) {
      if (e.Name != value) {
        return;
      }

      response.push(e);
    });

    return response;
  }

  FindByValue(value) {
    const a = this;

    let response = [];
    a.GetAllNodes().forEach(function(e) {
      if (e.Value != value) {
        return;
      }

      response.push(e);
    });

    return response;
  }

  GetAllNodes() {
    const a = this;

    const node = a.Container.querySelectorAll("li");
    if (node.length <= 0) {
      return [];
    }

    let response = [];
    node.forEach(function(e) {
      const id = e.getAttribute("data-bbtv-id");
      if (a.isNullOrWhitespace(id)) {
        return;
      }

      const myNode = a.Find(id);
      if (myNode == null) {
        return;
      }

      response.push(myNode);
    });

    return response;
  }

  GetCheckedNodes() {
    const a = this;

    let response = [];
    a.GetAllNodes().forEach(function(e) {
      if (!e.Checked) {
        return;
      }

      response.push(e);
    });

    return response;
  }

  GetCheckedValues() {
    const a = this;

    let response = [];
    a.GetCheckedNodes().map(function(e) {
      response.push(e.Value);
    });

    return response;
  }


  GetCheckedTags() {
    const a = this;

    let response = [];
    a.GetCheckedNodes().map(function(e) {
      response.push(e.Tag);
    });

    return response;
  }

  GetSelectedNode() {
    const a = this;

    let response = null;
    a.GetAllNodes().forEach(function(e) {
      if (e.Highlighted) {
        response = e;

        return false;
      }
    });

    return response;
  }

  appendHtml(el, html) {
    let node = document.createElement('template');
    node.innerHTML = html;

    node = node.content.firstChild;

        console.log(el);
    console.log(node);

    el.appendChild(node);

    // const frag = document.createDocumentFragment();
    // const span = document.createElement("span");
    // span.innerHTML = html;

    // for (var i = 0; i < span.childNodes.length; i++) {
    //   frag.appendChild(span.childNodes[i]);
    // }

    // console.log(el);
    // console.log(frag);

    // el.appendChild(frag);
  }

  createContainer() {
    const a = this;

    let result = document.getElementsByTagName("body");
    if (result.length <= 0) {
      return;
    }

    result = result[0].querySelectorAll(a.Options.ID);
    if (result.length <= 0) {
      return;
    }

    result[0].innerHTML = "<ul class=\"bbtreeview\"></ul>";
  }

  generateID() {
    return "treeviewItem" + (Math.floor(Math.random() * 1000001) + 100).toString();
  }

  generateNodeHtml(options) {
    const a = this;

    let tag = "";
    if (!a.isNullOrWhitespace(options.Tag)) {
      tag = encodeURIComponent(JSON.stringify(options.Tag));
    }

    let html = '<li data-bbtv-id="' + options.ID + '" data-bbtv-value="' + options.Value + '" data-bbtv-tag="' + tag + '">';
    html += '<div class="li">'

    if (a.Options.ShowCheckbox) {
      html += '<div class="icon checkbox"></div>';
    }

    if (a.Options.ShowIcon) {
      html += '<div class="icon ' + options.Icon + '"></div>';
      html += '<span title="' + options.Hint + '">' + options.Name + '</span>';
    } else {
      html += '<span class="noicon" title="' + options.Hint + '">' + options.Name + '</span>';
    }

    html += '</div>';
    html += '<ul></ul>';
    html += '</li>';

    return html;
  }

  getNode(el) {
    const a = this;

    let node = null;
    if (a.isTag(el, "li")) {
      node = el;
    } else {
      node = a.parentsUntilTagName(el, "li");
    }

    const id = node.getAttribute("data-bbtv-id");

    if (a.isNullOrWhitespace(id)) {
      return null;
    }

    return a.Find(id);
  }

  getOptions(options) {
    const a = this;

    let _options = Object.assign({
      ID: null,
      ParentID: null,
      Name: "",
      Hint: "",
      Value: "",
      Icon: "folder",
      Checked: false,
      Tag: null
    }, options);

    if (_options.ID == null) {
      _options.ID = a.generateID();
    }

    if (_options.Tag == null) {
      _options.Tag = "";
    }

    return _options;
  }

  isNullOrWhitespace(value) {
    if (typeof (value) == "undefined") {
      return true;
    }

    if (value == null) {
      return true;
    }

    return (value.toString().trim().length <= 0);
  }

  isTag(el, tagName) {
    return (el.tagName.toLowerCase() == tagName);
  }

  parentsUntilTagName(el, tagName) {
    const a = this;

    let node = el;

    while (true) {
      if (typeof(node.parentNode) == "undefined") {
        break;
      }

      node = node.parentNode;

      if (typeof(node) == "undefined") {
        break;
      }

      if (a.isTag(node, "ul")) {
        if (node.classList.contains("bbtreeview")) {
          return null;
        }
      }

      if (a.isTag(node, tagName)) {
        break;
      }
    }

    return node;
  }

}