class View {
  constructor() {}

  drawDirTree(dirtree, ulToAdd = document.getElementsByTagName("ul")[0]) {
    var dirtreeul = document.getElementsByTagName("ul");
    var tag = document.createElement("li");
    var text = document.createTextNode(dirtree[0]);
    tag.appendChild(text);
    tag.classList.add("caret");

    ulToAdd.appendChild(tag);
    if (dirtree.length > 1) {
      var newul = document.createElement("ul");
      newul.classList.add("nested");

      tag.parentElement.appendChild(newul);
      for (let i = 1; i < dirtree.length; i++) {
        if (Array.isArray(dirtree[i])) {
          this.drawDirTree(dirtree[i], newul);
        } else {
          var tag = document.createElement("li");
          var text = document.createTextNode(dirtree[i]);
          tag.appendChild(text);
          newul.appendChild(tag);
        }
      }
    }
  }

  removeDirTree() {
    let mainul = document.getElementsByTagName("ul")[0];
    while (mainul.firstChild) {
      mainul.lastChild.remove();
    }
    this.hloubka = 1;
  }

  dirTreeToggler() {
    var toggler = document.getElementsByClassName("caret");
    var i;

    function addClass() {
      this.nextSibling.classList.toggle("active");
      this.classList.toggle("caret-down");
    }

    for (i = 0; i < toggler.length; i++) {
      toggler[i].addEventListener("click", addClass);
    }
    toggler[0].classList.add("caret-down");
    if (toggler[0].nextSibling) {
      toggler[0].nextSibling.classList.add("active");
    }
    toggler[0].removeEventListener("click", addClass);
  }
}