'use strict';

/* global document XMLHttpRequest */


function nodeScriptReplace(node) {
  if ( node.tagName === 'SCRIPT' ) {
    node.parentNode.replaceChild( nodeScriptClone(node) , node );
  }
  else if(node.children) {
    for ( const child of node.children ) {
      nodeScriptReplace( child );
    }
  }

  return node;
}
function nodeScriptClone(node){
  const script  = document.createElement("script");

  script.text = node.innerHTML;
  [ ...node.attributes].forEach( attr => {
    script.setAttribute( attr.name, attr.value );
  });
  return script;
}

document.addEventListener('DOMContentLoaded', () => {
  const httpRequest = new XMLHttpRequest();

  httpRequest.onreadystatechange = () => {
    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
      const response = httpRequest.responseText;
      const data = JSON.parse(response);
      document.getElementById('tree').appendChild(addDirectory(data));

      Array.from(document.getElementsByTagName('a')).forEach(a => {
        a.onclick = function (e) {
          e.preventDefault();
          e.stopPropagation();
          const setMd = new XMLHttpRequest();
          setMd.onreadystatechange = () => {
            if (setMd.readyState === 4 && setMd.status === 200) {
              document.getElementById('md').innerHTML = setMd.responseText;
              nodeScriptReplace(document.getElementById('md'));
            }
          };
          setMd.open('GET', a.href);
          setMd.send();
        };
      });
      Array.from(document.getElementsByClassName('directory')).forEach(dir => {
        dir.querySelectorAll('ul').forEach(ul => {
          ul.style.display = 'none';
        });
        dir.onclick = e => {
          e.stopPropagation();

          dir.querySelectorAll('ul').forEach(ul => {
            ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
          });
        };
      });
    }
  };
  httpRequest.open('GET', '/data');
  httpRequest.send();
});

function addDirectory(data) {
  const ul = document.createElement('ul');
  data.children.forEach(item => {
    const li = document.createElement('li');
    const text = document.createTextNode(item.name);

    if (item.type === 'file') {
      const a = document.createElement('a');
      a.appendChild(text);
      a.href = item.path;
      li.appendChild(a);
      li.classList.add('file');
    } else {
      li.appendChild(text);
      li.tabIndex = 0;
      li.appendChild(addDirectory(item));
      li.classList.add('directory');
    }
    ul.appendChild(li);
  });
  return ul;
}