/*
Baum-Demo
von Ulrich Hilger, https://uhilger.de
8. Juli 2021
*/

var vorlage = 'baum-inhalt.mustache';

/**
 * Den Baum initial befuellen
 */
function baum_init() {
  http_get('liste.json', function(antwort) {
      html_erzeugen(vorlage, JSON.parse(antwort), function(html) {
          var baumdiv = document.querySelector('.baum');
          baumdiv.appendChild(html_to_element(html));
          addEvtListener('.baum-elem', 'click', baum_klick);
      });
  });
}

/**
 * Einen Klick auf ein Baum-Element verarbeiten
 */
function baum_klick(event) {
    var t = event.target;
    var bereich = t.nodeName;
    if(bereich.toLowerCase() === 'i') {
        info_zeigen('Piktogramm von ' + text_zu_bild(t) + ' geklickt');
        baum_pikto_klick(t);
    } else if(bereich.toLowerCase() === 'span') {
        info_zeigen(t.textContent + ' gewaehlt');
        baum_text_klick(t);
    } else {
        // tue nichts
    }
}

/**
 * Klick auf Piktogramm
 * 
 * Wenn Ordner:
 * 
 *   Wenn geoeffnet: Ordner schliessen
 *     Inhalt verbergen oder entfernen (je nach Modus)
 * 
 *   Wenn geschlossen: Ordner oeffnen
 *     wenn leer, ggf. Inhalt laden
 *     wenn nicht leer: Inhalt darstellen
 * 
 * Wenn Datei:
 *   tue nichts
 */
function baum_pikto_klick(iElem) {
    var typ = baum_element_typ(iElem);
    switch(typ) {
        case 1:
            // Klick auf geschlossenen Ordner
            info_anfuegen(', geschlossen, wurde geoffnet');
            baum_pikto_wechseln(iElem, 'icon-folder', 'icon-folder-open');
            var c = iElem.parentNode.querySelector('.baum-zweig');
            if(c === undefined || c === null) {
                var neue = baum_elemente();
                html_erzeugen(vorlage, neue, function(html) {
                  iElem.parentNode.appendChild(html_to_element(html));
                });
            } else {
                baum_toggle_children(iElem.parentNode, 'block');
            }
            break;
        case 2:
            // Klick auf geoeffneten Ordner
            info_anfuegen(', geoeffnet, wurde geschlossen');
            baum_pikto_wechseln(iElem, 'icon-folder-open', 'icon-folder');
            baum_toggle_children(iElem.parentNode, 'none');
            break;
        case 3:
            // Klick auf Datei
            break;
    }
}

/**
 * Den Text zu einem Piktogramm ermitteln
 */
function text_zu_bild(iElem) {
    return iElem.parentNode.querySelector('.baum-text').textContent;
}

/**
 * Klick auf Text
 * 
 * Wenn Datei:
 * a) noch nicht gewaehlt: Auswahl der Datei
 * b) gewaehlt: Aktion ausloesen, z.B. Datei oeffnen 
 * 
 * Wenn Ordner:
 * a) noch nicht gewaehlt: Auswahl des Ordners
 * b) gewaehlt: -
 */ 
function baum_text_klick(tElem) {
    var gewaehlt = document.querySelector('.gewaehlt');
    if(gewaehlt !== undefined && gewaehlt !== null) {
        if(tElem !== gewaehlt) {
            gewaehlt.classList.remove('gewaehlt');
        } else {
            info_zeigen('zweiter Klick auf ' + tElem.textContent);
        }
    }
    if(tElem.classList.contains('gewaehlt')) {
        tElem.classList.remove('gewaehlt');
    } else {
        tElem.classList.add('gewaehlt');
    }
}

/**
 * Kind-Elemente eines Baum-Elements umschalten
 */
function baum_toggle_children(elem, visibility) {
    var c = elem.querySelector('.baum-zweig');
    var anz = c.children.length;
    for(var i = 0; i < anz; i++) {
        c.children[i].style.display = visibility;
    }
}

/**
 * Piktogramm eines Baum-Elements wechseln
 */
function baum_pikto_wechseln(iElem, weg, neu) {
    iElem.classList.remove(weg);
    iElem.classList.add(neu);
}

/**
 * Anhand der Typklasse den Typ des Baumelements ermitteln
 * 
 * elem: Das Element, das die Typklasse des Baumelements enthaelt
 * return: 1 (ordner geschlossen), 2 (ordner geoeffnet), 3 (datei)
 */
function baum_element_typ(elem) {
    if(elem.classList.contains('icon-folder')) {
        return 1;
    } else if(elem.classList.contains('icon-folder-open')) {
        return 2;
    } else if(elem.classList.contains('icon-doc-inv')) {
        return 3;
    }
}

/**
 * Baum-Elemente aus Datenobjekten erzeugen
 */
function baum_elemente() {
  var dateien = new Array();
  dateien.push(new Datei('datei.txt', 'datei', 'icon-doc-inv'));
  dateien.push(new Datei('Ordner', 'ordner', 'icon-folder'));
  dateien.push(new Datei('index.html', 'datei', 'icon-doc-inv'));
  dateien.push(new Datei('stile.css', 'datei', 'icon-doc-inv'));
  var elem = new BaumElem('/meine-app/cms/test', dateien);
  return elem;
}

/**
 * Eine Info-Nachricht anzeigen
 */
function info_zeigen(text) {
    document.querySelector('.msg').textContent = text;
}

/**
 * Einen Text zur Infonachricht hinzufuegen
 */
function info_anfuegen(text) {
    var vorhanden = document.querySelector('.msg').textContent;
    document.querySelector('.msg').textContent = vorhanden + text;
}

/* ---- Objekte ---- */

function BaumElem(p, d) {
    this.pfad = p;
    this.dateien = d;
}

function Datei(n, t, k) {
    this.name = n;
    this.typ = t;
    this.typKlasse = k;
}



/* ========= HELFERLEIN =========== */



/* ---- JS ---- */

function addEvtListener(selector, eventName, func) {
  document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
};

/* ---- DOM ---- */

function html_to_element(html) {
    let temp = document.createElement('template');
    html = html.trim(); // Never return a space text node as a result
    temp.innerHTML = html;
    return temp.content.firstChild;
};  

/* ---- Vorlagen ---- */

var cache = new Array();

function html_erzeugen(vurl, inhalt, cb) {
    var vorlage = cache[vurl];
    if (vorlage === undefined) {
      vorlage_laden_und_fuellen(vurl, inhalt, cb);
    } else {
      vorlage_fuellen(vurl, inhalt, cb);
    }
}

function vorlage_fuellen(vurl, inhalt, cb) {
  cb(Mustache.render(cache[vurl], inhalt));
}

function vorlage_laden_und_fuellen(vurl, inhalt, cb) {
    http_get(vurl, function(antwort, status) {
        cache[vurl] = antwort;
        vorlage_fuellen(vurl, inhalt, cb);
    });
}

/* ---- HTTP ----- */

function http_get(callurl, cb) {
  //http_call('GET', u, null, cb);
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      cb(this.responseText);
    }
  };
  xhr.open('GET', callurl);
  xhr.setRequestHeader('Content-type', 'application/text');
  xhr.send();
}