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

  /* ================== Dir Tree ================== */

  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] != "unmodified") {
          li[skip].style.backgroundColor = "#008080";
          li[skip].style.color = "white";
        } else {
          li[skip].style.removeProperty("background-color");
          li[skip].style.removeProperty("color");
        }

        skip += 1;
      }
    }
  }

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

  /* ================== Text Area ================== */

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

    this.simplemde.value(fileread);
  }

  closeEditor() {
    var editText = document.getElementById("editText");
    editText.style.removeProperty("display");
  }

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

  /* ================== Windows ================== */
  closeDialog() {
    var settings = document.getElementsByClassName("settingsbg")[0];
    var publish = document.getElementsByClassName("commitWrapper")[0];

    settings.style.removeProperty("display");
    publish.style.removeProperty("display");
  }
  /* ------------------ Settings ------------------ */

  openSettings() {
    this.closeEditor();

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

    let repo = document.getElementById("inputRepository");
    let baseDir = document.getElementById("inputBaseDir");
    let name = document.getElementById("inputName");
    let email = document.getElementById("inputEmail");

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

  /* ------------------ Publish ------------------ */

  openPublish(changedFiles) {
    this.closeDialog();
    this.closeEditor();

    var publish = document.getElementsByClassName("commitWrapper")[0];
    publish.style.display = "grid";

    let form = document.getElementById("formPublish");

    if (changedFiles.length == 0 && localStorage.getItem("pushError") != "true") {
      this.errorPublish("Žádné soubory nebyly změněny.");
      form.style.display = "none";
    } else {
      form.style.removeProperty("display");

      let ul = document.getElementById("edittedFiles");
      for (let i = 0; i < ul.children.length; i++) {
        ul.lastChild.remove();
      }
      for (let i = 0; i < changedFiles.length; i++) {
        let li = document.createElement("li");
        var text = document.createTextNode(changedFiles[i]);
        li.appendChild(text);
        ul.appendChild(li);
      }
    }

    let gitMsg = document.getElementById("inputCommitMsg");
    gitMsg.disabled = localStorage.getItem("pushError") == "true";
  }

  errorPublish(error) {
    let errorDiv = document.getElementById("errorPublish");
    if (!error) {
      errorDiv.style.removeProperty("display");
      return;
    }
    errorDiv.style.display = "block";

    errorDiv.innerHTML = error;
  }
}