/*
    kalender - a calendar component for the browser
    Copyright (c) 2022  Ulrich Hilger
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.
 
    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/


/*
 * JavaScript code fuer den Jahreskalender
 */

var jahr;    
var emap = new Map();
var fabrik = new MonatsboxFabrik();
var ereignisId = 'keine';
var monatsnamen = new Array("Januar", "Februar", "März", "April", "Mai", 
          "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
var tagesnamen = new Array("Sonntag","Montag", "Dienstag", "Mittwoch", 
          "Donnerstag", "Freitag", "Samstag");
          
function kalenderInit() {
  var jetzt = new Date();
  jahr = jetzt.getFullYear();
  katalogLesen(function(){
    kalenderZeigen(fabrik, jahr);
  });
  document.querySelector('.icon-left-dir').addEventListener('click', function() {
    kalenderZeigen(fabrik, --jahr);
    kalenderblattZuruecksetzen();
  });
  document.querySelector('.icon-right-dir').addEventListener('click', function() {
    kalenderZeigen(fabrik, ++jahr);
    kalenderblattZuruecksetzen();
  });
  document.querySelector('#heute1').addEventListener('click', heute);
  document.querySelector('#heute2').addEventListener('click', heute);
  
  document.querySelector('.icon-ellipsis-vert').addEventListener('click', dialogOeffnen);
  document.querySelector('.jahr-eingabe').addEventListener('keyup', function(event) {
    var eingabe = document.querySelector('.jahr-eingabe').value;
    if(!isNaN(eingabe)) {
      kalenderZeigen(fabrik, eingabe);
    }
  });
  document.querySelector('.icon-cancel').addEventListener('click', function() {
    document.querySelector(".dialog").classList.remove('dlg-open');
  });    
  document.querySelector(".dialog").classList.remove('dlg-open');
}
function heute() {
  var jetzt = new Date();
  jahr = jetzt.getFullYear();
  kalenderblattZuruecksetzen();
  kalenderZeigen(fabrik, jahr);
}
function dialogOeffnen() {
  var dlg = document.querySelector(".dialog");
  if(!dlg.classList.contains('dlg-open')) {
    dlg.classList.add('dlg-open');
  }
}
function katalogLesen(cb) {      
  http_call('GET', '../ereignis/katalog', '', function(antwort, status) {
    if(status === 200) {
      var json = JSON.parse(antwort);
      var sel = document.createElement("select");
      var ix = 0;
      while(ix < json.length) {
        if(ix === 0) {
          ereignisId = json[ix].id;
        }
        var opt = document.createElement("option");
        opt.value = json[ix].id;
        opt.textContent = json[ix].name;
        sel.appendChild(opt);
        ++ix;
      }
      sel.addEventListener('change', function(event) {
        var jetzt = new Date();
        jahr = jetzt.getFullYear();
        ereignisId = event.target.value;
        kalenderZeigen(fabrik, jahr);
      });
      document.querySelector('.ekat').appendChild(sel);
      cb();
    } else {
      // ..
      cb();
    }
  });
}
function kalenderZeigen(fab, jahr) {        
  http_call('GET', '../ereignis/liste/' + ereignisId + '/' + jahr, '', function(antwort, status) {
    console.log('kalenderZeigen status:' + status);
    if(status == 200) {
      console.log('ereignisse parsen..');
      var json = JSON.parse(antwort);
      ereignislisteInMap(json);
    } else {
      console.log('keine ereignisse');
      emap = new Map();
    }
    // Kalender erzeugen
    var starttag = 1; // Montag
    var ruhetag = 0; // Sonntag
    var elem = document.querySelector('.kalender');      
    while(elem.firstChild) {
      elem.removeChild(elem.firstChild);
    }
    kalenderErzeugen(fab, elem, jahr, starttag, ruhetag);
    var jahrTitel = document.querySelector('.jahr-titel');      
    jahrTitel.textContent = jahr;
  });      
}
function ereignislisteInMap(json) {
  var ix = 0;
  emap = new Map();
  var tmap;
  while(ix < json.length) {
    var ename = json[ix].name;
    var emonat = json[ix].monat - 1;
    var etag = json[ix].tag;
    if(emap.has(emonat)) {
      tmap = emap.get(emonat);
      if(tmap.has(etag)) {
        var tname = tmap.get(etag);
        tmap.set(etag, tname + ', ' + ename);
        console.log('added ' + ename + ' to existing tname ' + etag + ', result ' + tname + ' ' + ename);
      } else {
        tmap.set(etag, ename);
        console.log('added new etag ' + etag + ' ' + ename + ' to existing tmap');
      }            
  } else {
      tmap = new Map();
      tmap.set(etag, ename);
      console.log('added ' + etag + ' ' + ename + ' to new tmap');
      emap.set(emonat, tmap);
      console.log('added new tmap to emap ' + emonat);
    }
    ix++;
  }
  //console.log(json[1].monat + ' ' + json[1].tag);
}
function kalenderErzeugen(fabrik, behaelter, jahr, starttag, ruhetag) {
  var monatsnamen = new Array("Januar", "Februar", "März", "April", "Mai", 
        "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");    
  var m = -1;
  var elem;
  var titel;

  while(++m < 12) {
    var ereignisse = new Map;   
    if(emap.has(m)) {
      console.log('kalenderErzeugen emap.keys ' + Array.from(emap.get(m).keys( )));
      console.log('kalenderErzeugen emap.values: ' + Array.from(emap.get(m).values( )));
      var keys = Array.from(emap.get(m).keys( ));
      for(var i = 0; i < keys.length; i++) {
        ereignisse.set(keys[i], 'monatsboxFeiertag');
      }
    }
    titel = document.createElement("div");
    titel.textContent = monatsnamen[m];
    elem = document.createElement("div");
    elem.className = "monat-elem";
    elem.appendChild(titel);
    elem.appendChild(fabrik.monatsboxErzeugen(jahr, m, starttag, ruhetag, ereignisse, function(event) {
      // hier auf klicks in die Monatsbox reagieren
      var d = fabrik.datum(event);
      var cm = d.getMonth();
      var ct = d.getDate();
      console.log('klick auf monat ' + cm + ' tag ' + ct);
      
      var ereignisnamen = '';
      if(emap.has(cm)) {
        var tmap = emap.get(cm);
        if(tmap.has(ct)) {
          ereignisnamen = tmap.get(ct);
          console.log('ereignisse: ' + ereignisnamen);
          //kalenderblattZeigen(ct, cm, jahr, ereignisnamen);
        }
      }
      kalenderblattZeigen(ct, cm, jahr, ereignisnamen);
      
      /*
      document.querySelector('.datum-wahl').textContent = 
              d.toLocaleDateString('de-DE') + ' (' + 
              d.toISOString() + ')';        
      */
    }));      
    behaelter.appendChild(elem);
  }
}

function kalenderblattZeigen(tag, monat, jahr, ereignisse) {
  var datum = new Date(jahr, monat, tag);
  //datum.setFullYear(jahr);
  //datum.setMonth(monat);
  var mname = monatsnamen[monat];
  //datum.setDate(tag);
  var wtag = datum.getDay();
  //console.log('wtag ' + wtag + ', Tagesname ' + tagesnamen[wtag]);
  var mt = ++monat;
  document.querySelector('.kbl-datum').textContent = tagesnamen[wtag] + 
          ', ' + tag + '. ' + mname + ' ' + jahr;
  document.querySelector('.kbl-ereignisse').textContent = ereignisse;
  //var kbl = document.querySelector('.kalenderblatt');
  //kbl.classList.add('kbl-open');
  dialogOeffnen();
}

function kalenderblattZuruecksetzen() {
  document.querySelector('.kbl-datum').textContent = 'Kein Datum markiert';
  document.querySelector('.kbl-ereignisse').textContent = '';  
}

/*
 * Der Content-Type 'multipart/form-data' muss weggelassen werden, damit der 
 * Browser selbsttaetig die Boundary erzeugt und der Anfrage mitgibt. Fuer 
 * diesen Content-Type muss ctype=' ' uebergeben werden.
 * 
 * Wird ctype ganz weggelassen (ctype === undefined) bekommen POST, PUT und 
 * DELETE automatisch 'application/x-www-form-urlencoded' als Content-Type 
 * hinzugefuegt.
 * 
 * Alle anderen Angaben fuer Content-Type muessen im Parameter ctype 
 * uebergeben werden.
 * 
 * @param {type} method  GET, PUT, POST, DELETE
 * @param {type} callurl  wohin die Anfrage gehen soll
 * @param {type} data  was im Body gesendet werden soll oder ''
 * @param {type} scallback  Callback Funktion (optional)
 * @param {type} ctype  der gewuenschte Content-Type (optional)
 * @returns {undefined}
 */
function http_call(method, callurl, data, scallback, ctype) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
      scallback(this.responseText, this.status);
    }
  };
  xhr.open(method, callurl);
  if (method === 'GET') {
    xhr.setRequestHeader('Content-type', 'application/text');
    xhr.send();
  } else if (method === 'POST' || method === 'PUT' || method === 'DELETE') {
    if(ctype === undefined) {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    } else if(ctype === ' ') {
      // keine Angabe fuer Content-Type, Browser waehlt selbst
    } else {
      xhr.setRequestHeader('Content-Type', ctype);
    }
    xhr.send(data);
  }
}