/**
 * Build the filetree
 * @param {HTMLElement} parent Root element of the filetree
 * @param {{name: string, is_dir: boolean, children: any[]}} data FileNode
 */
const buildFileTree = (parent, data) => {
  const ul = document.createElement("ul");
  data.forEach((item) => {
    const li = document.createElement("li");
    li.textContent = item.name;
    li.classList.add(item.is_dir ? "directory" : "file");

    if (item.is_dir) {
      li.classList.add("collapsed");
      li.addEventListener("click", function (e) {
        if (e.target === li) {
          li.classList.toggle("collapsed");
        }
      });
    }

    ul.appendChild(li);

    if (item.children && item.children.length > 0) {
      buildFileTree(li, item.children);
    }
  });

  parent.appendChild(ul);
};

window.addEventListener("load", () => {
  const fileTreeElement = document.getElementsByTagName("aside")[0];
  const dataElement = fileTreeElement.getElementsByTagName("div")[0];

  buildFileTree(
    fileTreeElement,
    JSON.parse(dataElement.getAttribute("data-json")).children
  );

  console.log(JSON.parse(dataElement.getAttribute("data-json")));

  dataElement.remove();
});