var userObj = {role:'employee'};

removeElement("Kursvynforgymnasiet"); //FOR TESTING
console.clear();



(() => {
  '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 helpanswerArray = [];
  
  
  
  
  function closeHelpdiv(){
    helpEl.classList.remove("open");
    deactivateHelpbuttonEventlisteners();
    helpEl.querySelector(".help-back-button").removeEventListener("click", helpdivGotoOptionsPage);
  }
  
  function openHelpdiv(){
    helpEl.classList.add("open");
    helpdivGotoOptionsPage();
   // document.getElementById("ked-help").focus();
  }
  
  function toggleHelpdiv(){
    if(helpEl.classList.contains("open")){
      closeHelpdiv();
    } else{
      openHelpdiv();
    }
  }
  
  
  
  
  function helpdivGotoOptionsPage(){
    helpEl.classList.remove("showingAnswer");
    helpEl.classList.remove("showingModal");
//    document.getElementsByClassName("help-back-button")[0].removeEventListener("click",helpdivGotoOptionsPage);
    helpEl.querySelector(".help-back-button").removeEventListener("click", helpdivGotoOptionsPage);
    activateHelpbuttonEventlisteners();
  }
  
  function helpdivGotoAnswerPage(event){
    var answerIndex = parseInt(event.srcElement.getAttribute('answerindex'));
    helpEl.classList.add("showingAnswer");
    if(helpanswerArray[answerIndex].type == "text"){
      answerTextcontainerEl.innerHTML = helpanswerArray[answerIndex].content;
      answerTitleEl.innerHTML = helpanswerArray[answerIndex].title;
      helpEl.querySelector(".help-back-button").addEventListener("click", helpdivGotoOptionsPage);
    }
    if(helpanswerArray[answerIndex].type == "video"){
      closeHelpdiv();
      helpEl.classList.add("showingModal");
      var modal = createFragment(createVimeoModalHTML(helpanswerArray[answerIndex].title, helpanswerArray[answerIndex].content.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
        add the HTML for a button leading to a help-text
        create a code-friendly object and push it to helpanswerArray
      if the element represents a help-video
        add the HTML for a button leading to a help-video
        create a code-friendly object and push it to helpanswerArray
    set buttons attribute "answerindex"
    */
    
    var data = await assembleData(arrayOfPotentailTextIDs);
    
    for (var buttonIndex = 0; buttonIndex < data.length; buttonIndex++){
      var result = data[buttonIndex];
      var classStr = "helpoptionButton" + buttonIndex;
      if(result.type == undefined){ //that means it's text
        helpEl.querySelector(".helpdivOptionslist").innerHTML += '<a class="help-selection-button largetext clickable ' + classStr + '">' + result.title + ' </a>';
        helpanswerArray.push({content: result.text, title: result.title, type: "text"});
      }
      if(result.type == "video"){
          helpEl.querySelector(".helpdivOptionslist").innerHTML += '<a class="help-selection-button largetext clickable ' + classStr + '"><i class="fas fa-video"></i> ' + result.title + '</a>';
        helpanswerArray.push({content: result.url, title: result.title, type: "video"});
      }
    }
    
    for(var i = 0; i < helpanswerArray.length; i++){
      var classStr = "helpoptionButton" + i;
      helpEl.querySelector("." + classStr).setAttribute("answerindex", i);
    }
  }
  
  function activateHelpbuttonEventlisteners(){
      for(var i = 0; i < helpanswerArray.length; i++){
        var classStr = "helpoptionButton" + i;
        helpEl.querySelector("." + classStr).addEventListener("click", helpdivGotoAnswerPage);
      }
  }
  
  function deactivateHelpbuttonEventlisteners(){
      for(var i = 0; i < helpanswerArray.length; i++){
        var classStr = "helpoptionButton" + i;
        helpEl.querySelector("." + classStr).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);
  setupHelpOptions(arrayOfPotentialTextIDs);
  
  const targetNode = document.getElementById("svid10_294be72f1665317fd6c214fd"); //!
  const config = {childList: true, subtree: true};
  const callback = function(mutationsList, obs){
    Array.from(mutationsList[0].addedNodes).forEach((node) => {
      console.log(node);
    });
  };
  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
})();

/////////////////
// FOR TESTING //
/////////////////
setTimeout(function(){
  document.getElementById("svid10_294be72f1665317fd6c21500").innerHTML += "<div id='Kursvynforgymnasiet'> </div>";
  removeElement("KEDComponents");
}, 3000);
setTimeout(function(){
  removeElement("Kursvynforgymnasiet");
}, 4000);
function removeElement(elementId) {
    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}