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(){
  //console.log(document.getElementById("KEDComponents"));
  removeElement("KEDComponents");
}, 4000);
function removeElement(elementId) {
    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}



(() => {
  'use strict';
  
  
  const 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.
    var element = document. getElementById(elementId);
    element. parentNode. removeChild(element);
  }
  
  
  
  const helpEl = document.getElementById("ked-help");
  var currentHelpIDs = [];
  
  
  
  
  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();
  }
  
  
  
  
  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 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>
`;

  
  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);
  //helpEl.querySelector(".help-modal-overlay").addEventListener("click",helpdivGotoOptionsPage);
  //helpEl.querySelector(".help-modal-cross").addEventListener("click",helpdivGotoOptionsPage);



  
  
  
  

  async function getData(tag) {
    const data = await fetch('https://help.talgdank.se/tag/' + tag).then((result) => result.json());
    return data;
  }
  
  async function assembleData (arrayOfPotentialTextIDs) {
    /*
    for each ID: get data
    filter out data where success == false, aka those with no texts attached to them
    for each remaining data
      for each text/media file in that data
        add them to arrays "media" and "texts"
    filter out texts & media files whose "role" attribute doesn't match the users
    return
    
    return format is array of objects, one object per text / media file
    */
    let media = [];
    let texts = [];
    
    const response = await Promise.all(arrayOfPotentialTextIDs.map(id => getData(id)));
    response.filter(({success}) => success).forEach(({result}) => {
        if (result.texts) texts = [...texts, ...result.texts];
        if (result.media) media = [...media, ...result.media];
    })
    return [...texts, ...media].filter(item => item && (item.role === undefined || item.role === userObj.role));
  }

  async function setupHelpOptions (arrayOfPotentailTextIDs) {
    /*
    get data
    for each element in data
      if the element represents a help-text
        create a button leading to a help-text. The text and other important info is stored in the object as attributes
      if the element represents a help-video
        add the HTML for a button leading to a help-video
    */
    var data = await assembleData(arrayOfPotentailTextIDs);
    /*
    var data = arrayOfPotentailTextIDs.map(id => getData(id)).filter(({success}) => success).forEach(result => {
      if(result.type == undefined){ //that means it's text
        var newButtonElem = document.createElement('a');
        //<a class="help-selection-button largetext clickable">' + result.title + ' </a>'
        newButtonElem.classList.add("help-selection-button");
        newButtonElem.classList.add("largetext");
        newButtonElem.classList.add("clickable");
        newButtonElem.innerHTML = result.title;
        newButtonElem.setAttribute("content", result.text);
        newButtonElem.setAttribute("answertitle", result.title);
        newButtonElem.setAttribute("type", "text");
        helpEl.querySelector(".helpdivOptionslist").appendChild(newButtonElem);
      }
      if(result.type == "video"){
        helpEl.querySelector(".helpdivOptionslist").innerHTML += '<a class="help-selection-button largetext clickable" content = "' + result.url + '" answertitle = "' + result.title + '" type = "video"><i class="fas fa-video"></i> ' + result.title + '</a>'; //since the content doesn't contain any HTML this is safe
      }
      
    });*/
    
    for (var buttonIndex = 0; buttonIndex < data.length; buttonIndex++){
      var result = data[buttonIndex];
      if(result.type == undefined){ //that means it's text
        var newButtonElem = document.createElement('a');
        //<a class="help-selection-button largetext clickable">' + result.title + ' </a>'
        newButtonElem.classList.add("help-selection-button");
        newButtonElem.classList.add("largetext");
        newButtonElem.classList.add("clickable");
        newButtonElem.innerHTML = result.title;
        newButtonElem.setAttribute("content", result.text);
        newButtonElem.setAttribute("answertitle", result.title);
        newButtonElem.setAttribute("type", "text");
        helpEl.querySelector(".helpdivOptionslist").appendChild(newButtonElem);
      }
      if(result.type == "video"){
        helpEl.querySelector(".helpdivOptionslist").innerHTML += '<a class="help-selection-button largetext clickable" content = "' + result.url + '" answertitle = "' + result.title + '" type = "video"><i class="fas fa-video"></i> ' + result.title + '</a>'; //since the content doesn't contain any HTML this is safe
      }
    }
    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)});
  }
  
  
  
  
  
  
  function setupTipOptions(elemArray){
    elemArray.forEach(elem =>{
      elem.addEventListener("click", helpdivGotoAnswerPage);
    });
  }
  
  var arrayOfPotentialTipElems = Array.from(document.querySelectorAll('[data-help-title][data-help-text]'));
  setupTipOptions(arrayOfPotentialTipElems);
  var tipElemsWhichHaveBeenChecked = arrayOfPotentialTipElems;
  

  
  
  
  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);
  setupHelpOptions(arrayOfPotentialTextIDs);
  currentHelpIDs = arrayOfPotentialTextIDs;
  
  
  const targetNode = document;
  const config = {childList: true, subtree: true};
  const callback = function(mutationsList, obs){
    
    var newPotentialTextIDs = [];
    var potentialTextIDsToRemove = [];
    
    mutationsList.forEach(record => {
      
      //el.children.length == 0 instead of el.innerText == '' because el.innerText == '' disqualifies an object even if it only contains white space.
      //filter(el => el.nodeType == Node.ELEMENT_NODE) filters out text nodes and prevents errors
      newPotentialTextIDs = newPotentialTextIDs.concat(Array.from(record.addedNodes).filter(el => el.nodeType == Node.ELEMENT_NODE).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(Array.from(record.removedNodes).filter(el => el.nodeType == Node.ELEMENT_NODE).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));
    });
    
    console.log(newPotentialTextIDs);
    console.log(potentialTextIDsToRemove);
    console.log(" ");
    
    if(newPotentialTextIDs.length != 0){
      setupHelpOptions(newPotentialTextIDs);
    }
    
    /*
    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);
    if(arrayOfPotentialTextIDs != currentHelpIDs){
      setupHelpOptions(arrayOfPotentialTextIDs);
      currentHelpIDs = arrayOfPotentialTextIDs;
    }
    
    var arrayOfPotentialTipElems = Array.from(document.querySelectorAll('[data-help-title][data-help-text]')).filter(el => (tipElemsWhichHaveBeenChecked.indexOf(el) == -1));
    setupTipOptions(arrayOfPotentialTipElems);
    tipElemsWhichHaveBeenChecked = tipElemsWhichHaveBeenChecked.concat(arrayOfPotentialTipElems);*/
  };
  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
})();