class View {
  constructor() {
    this.simplemde = new SimpleMDE({
      element: document.getElementById("editor"),
      spellChecker: false,
    });
  }

  drawDirTree(
    dirtree,
    ulToAdd = document.getElementsByTagName("ul")[0],
    parrentObj
  ) {
    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);
    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, parrentObj);
      } else {
        var tag = document.createElement("li");
        var text = document.createTextNode(dirtree[i]);
        tag.appendChild(text);
        newul.appendChild(tag);
        var _this = this;
        tag.addEventListener("click", function () {
          parrentObj.loadFile(dirtree[0] + dirtree[i]);
        });
      }
    }
  }

  statDirTree(
    dirtree,
    ulToAdd = document.getElementsByTagName("ul")[0].children[1]
  ) {
    var li = ulToAdd.children;
    var skip = 0;

    for (let i = 1; i < dirtree.length; i++) {
      if (Array.isArray(dirtree[i])) {
        this.statDirTree(dirtree[i], li[skip + 1]);
        skip += 2;
      } else {
        if (dirtree[i] == "*modified") {
          li[skip].style.backgroundColor = "red";
        } else {
          li[skip].style.removeProperty("background-color");
        }

        skip += 1;
      }
    }
  }

  openFile(fileread) {
    var editText = document.getElementById("editText");
    editText.style.display = "grid";

    this.simplemde.value(fileread);
  }

  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);
  }

  openSettings() {
    var settings = document.getElementsByClassName("settingsbg")[0];
    settings.style.display = "grid";

    let repo = document.getElementById("inputRepository");
    let baseDir = document.getElementById("inputBaseDir");

    repo.value = localStorage.getItem("repo");
    baseDir.value = localStorage.getItem("baseDir");
  }

  closeSettings() {
    var settings = document.getElementsByClassName("settingsbg")[0];
    settings.style.removeProperty("display");
  }

  showSaveButton(show) {
    var saveButton = document.getElementById("saveBtn");
    saveButton.disabled = show;
  }
}