var userObj = {role:'employee'}; //student


/////////////////
// FOR TESTING //
/////////////////
removeElement("Kursvynforgymnasiet");
Array.from(document.querySelectorAll('div .ked_boxed')).map(el => el.querySelectorAll('h5,h4,h3,h2'))[3].forEach(el=>{el.parentNode.removeChild(el)});

setTimeout(function(){
  const createFragment = (htmlStr) => {
    let frag = document.createDocumentFragment();
    let temp = document.createElement('div');

    temp.innerHTML = htmlStr;
    while(temp.firstChild) {
      frag.appendChild(temp.firstChild);
    }
    return frag;
  }
  document.getElementById("svid10_294be72f1665317fd6c21500").appendChild(createFragment("<div id='Kursvynforgymnasiet'> </div>").firstChild);
  document.getElementById("svid10_294be72f1665317fd6c21500").appendChild(createFragment("<div id='Kursvynforgymnasiet2'> </div>").firstChild);
  Array.from(document.querySelectorAll('div .ked_boxed'))[3].innerHTML = '<h3 data-help-text = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" data-help-title = "AAAAAA">KEDComponents</h3>' + Array.from(document.querySelectorAll('div .ked_boxed'))[3].innerHTML;
}, 3000);
setTimeout(function(){
  removeElement("KEDComponents");
}, 4000);
function removeElement(elementId) {
    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}




















//"tip" is used to refer to anything you can click on outside the helpsystem-rectangle.
//"helpbutton" and similar are used to refer to the buttons in the helpsystem-rectangle 
(() => {
  'use strict';
  
  const helpEl = document.getElementById("ked-help");
  
  helpEl.innerHTML = `
  <div class="help-dropdowndiv">
   <ul class="help-table helpdivOptionslist">
   </ul>

    <div class="helpdivAnswersDiv">
      <ul class="help-table helpdivAnswer-table">
        <div class="largetext noPaddingLeft"><a class="help-back-button clickable" style="display:inline;"><i class="fas fa-chevron-left"></i></a> <p class="help-answer-title" style="display:inline;"></p></div>
        <p class="smalltext help-answer-textcontainer"></p>
      </ul>
    </div>
  </div>

  <a class="help-questionmarkbutton clickable">
    <b class="questionmark">?</b>
  </a>
  `;

  
  const answerTextcontainerEl = helpEl.querySelector(".help-answer-textcontainer");
  const answerTitleEl = helpEl.querySelector(".help-answer-title");
  const videoTitleEl = helpEl.querySelector(".help-video-title");
  const videoPlayerEl = helpEl.querySelector(".help-video-player");
  
  helpEl.querySelector(".help-questionmarkbutton").addEventListener("click",toggleHelpdiv);
  


  const createVimeoModalHTML = (title, url) => `
  <div class="help-modalwindow" id="help-modalwindow">
    <div class="darken"></div>
    <div class="modal-page-wrap">
      <div class="overlay help-modal-overlay"></div>
      <div class="modal-page">
        <div class="removeItem help-modal-cross"></div> 
        <section>
          <h1 class="help-video-title">${title}</h1>
        </section>
        <section>
          <iframe class="help-video-player" src="https://player.vimeo.com/video/${url}?speed=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
        </section>
      </div>
    </div>
  </div>
  `;
  
  
  
  
  
  function createFragment(htmlStr){
    let frag = document.createDocumentFragment();
    let temp = document.createElement('div');

    temp.innerHTML = htmlStr;
    while(temp.firstChild) {
      frag.appendChild(temp.firstChild);
    }
    return frag;
  }

  function removeElement(elementId) {
    // Removes an element from the document.
    const element = document. getElementById(elementId);
    element. parentNode. removeChild(element);
  }
  
  
  
  
  
  function closeHelpdiv(){
    helpEl.classList.remove("open");
    deactivateHelpbuttonEventlisteners();
    helpEl.querySelector(".help-back-button").removeEventListener("click", helpdivGotoOptionsPage);
  }
  
  function openHelpdiv(){
    helpEl.classList.add("open");
    helpdivGotoOptionsPage();
  }
  
  function toggleHelpdiv(){
    if(helpEl.classList.contains("open")){
      closeHelpdiv();
    } else{
      openHelpdiv();
    }
  }
  
  function helpdivGotoOptionsPage(){
    helpEl.classList.remove("showingAnswer");
    helpEl.classList.remove("showingModal");
    helpEl.querySelector(".help-back-button").removeEventListener("click", helpdivGotoOptionsPage);
    activateHelpbuttonEventlisteners();
  }
  
  function helpdivGotoAnswerPage(event){
    helpEl.classList.add("open");
    var answerType = event.srcElement.getAttribute('type');
    var answerContent = event.srcElement.getAttribute('content');
    var answerTitle = event.srcElement.getAttribute('answertitle');
    if(answerType == null){
      answerType = "text";
      answerContent = event.srcElement.getAttribute('data-help-text');
      answerTitle = event.srcElement.getAttribute('data-help-title');
    }
    
    
    helpEl.classList.add("showingAnswer");
    if(answerType == "text"){
      answerTextcontainerEl.innerHTML = answerContent;
      answerTitleEl.innerHTML = answerTitle;
      helpEl.querySelector(".help-back-button").addEventListener("click", helpdivGotoOptionsPage);
    }
    if(answerType == "video"){
      closeHelpdiv();
      helpEl.classList.add("showingModal");
      var modal = createFragment(createVimeoModalHTML(answerTitle, answerContent.match(/\d+/)));
      helpEl.appendChild(modal);
      
      modal = document.getElementById("help-modalwindow");
      modal.querySelector('.removeItem').addEventListener('click', (ev) => {
        helpdivGotoOptionsPage();
        removeElement("help-modalwindow");
      });
      modal.querySelector('.overlay').addEventListener('click', (ev) => {
        helpdivGotoOptionsPage();
        removeElement("help-modalwindow");
      });
      
      
    }
    deactivateHelpbuttonEventlisteners();
  }
  
  
  
  
  
  
  
  
  //creating help buttons
  async function getData(tag) {
    const data = await fetch('https://help.talgdank.se/tag/' + tag).then((result) => result.json());
    return data;
  }

  
  function createHelpButton(answertitle, content, type, fromid, icon){
    var newButtonElem = document.createElement('a');
    newButtonElem.classList.add("help-selection-button");
    newButtonElem.classList.add("largetext");
    newButtonElem.classList.add("clickable");
    newButtonElem.innerHTML = icon ? icon + " " + answertitle : answertitle;
    newButtonElem.setAttribute("content", content);
    newButtonElem.setAttribute("answertitle", answertitle);
    newButtonElem.setAttribute("type", type);
    newButtonElem.setAttribute("fromid", fromid);
    helpEl.querySelector(".helpdivOptionslist").appendChild(newButtonElem);
  }
  async function setupHelpButtons (arrayOfPotentailTextIDs) {
    /*
    for each id
      get data
      for each text in data
        create a button leading to a help-text. The text and other important info is stored in the object as attributes
      for each video in data
        add the HTML for a button leading to a help-video
    activate event listeners
    */
    
    for(var idIndex = 0; idIndex < arrayOfPotentailTextIDs.length; idIndex ++){
      const id = arrayOfPotentailTextIDs[idIndex];
      const data = await getData(id);
      if(data.success){
        if(data.result.texts) data.result.texts.forEach(text => {
          createHelpButton(text.title, text.text, "text", id);
        });
        if(data.result.media) data.result.media.forEach(media =>{
          if(media.type == "video"){
            createHelpButton(media.title, media.url, "video", id, '<i class="fas fa-video"></i>');
          }
        });
      }
    }
    activateHelpbuttonEventlisteners();
  }
  
  function activateHelpbuttonEventlisteners(){
    Array.from(helpEl.querySelectorAll(".help-selection-button")).forEach((el) => {el.addEventListener("click", helpdivGotoAnswerPage)});
  }
  
  function deactivateHelpbuttonEventlisteners(){
    Array.from(helpEl.querySelectorAll(".help-selection-button")).forEach((el) => {el.removeEventListener("click", helpdivGotoAnswerPage)});
  }
  
  var arrayOfPotentialTextIDs = Array.from(document.querySelectorAll('div[id]:not([class])')).filter(el => el.innerText === '' && el.id.match(/svid.+?|HTML\d?|Skript\d?/i) === null).map(el => el.id);
  setupHelpButtons(arrayOfPotentialTextIDs);
  
  
  
  
  //set up tip buttons
  function setupTipOptions(elemArray){
    elemArray.forEach(elem =>{
      elem.addEventListener("click", helpdivGotoAnswerPage);
      createHelpButton(elem.getAttribute("data-help-title"), elem.getAttribute("data-help-text"), "text", "ked-help-REEEEEEEEE");
    });
  }
  
  var arrayOfPotentialTipElems = Array.from(document.querySelectorAll('[data-help-title][data-help-text]'));
  setupTipOptions(arrayOfPotentialTipElems);
  

  
  
  
  //update tips and help buttons when page changes
  const targetNode = document;
  const config = {childList: true, subtree: true};
  const callback = function(mutationsList, obs){
    var newPotentialTextIDs = [];
    var potentialTextIDsToRemove = [];
    
    mutationsList.forEach(record => {
      var addedNodes = Array.from(record.addedNodes).filter(el => el.nodeType == Node.ELEMENT_NODE);//filter(el => el.nodeType == Node.ELEMENT_NODE) filters out text nodes and prevents errors
      var removedNodes = Array.from(record.removedNodes).filter(el => el.nodeType == Node.ELEMENT_NODE);//filter(el => el.nodeType == Node.ELEMENT_NODE) filters out text nodes and prevents errors
      
      //el.children.length == 0 is used instead of el.innerText == '' because el.innerText == '' disqualifies an object even if it only contains white space.
      newPotentialTextIDs = newPotentialTextIDs.concat(addedNodes.filter(el => el.matches('div[id]:not([class])')).filter(el => el.children.length == 0 && el.id.match(/svid.+?|HTML\d?|Skript\d?/i) === null).map(el => el.id));
      potentialTextIDsToRemove = potentialTextIDsToRemove.concat(removedNodes.filter(el => el.matches('div[id]:not([class])')).filter(el => el.children.length == 0 && el.id.match(/svid.+?|HTML\d?|Skript\d?/i) === null).map(el => el.id));
    });
    
    if(newPotentialTextIDs.length != 0){
      setupHelpButtons(newPotentialTextIDs);
    }    
    if(potentialTextIDsToRemove.length != 0){
      potentialTextIDsToRemove.forEach(id => {var el = helpEl.querySelector('[fromid = ' + id + ']'); el.parentNode.removeChild(el);});
    }
    
    
    //tips
    //var arrayOfPotentialTipElems = Array.from(document.querySelectorAll('[data-help-title][data-help-text]'));
    //setupTipOptions(arrayOfPotentialTipElems);
  };
  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
})();