// +-----:
// +-----: class TPHideText
// +-----:

class TPHideText extends TC {
  constructor(t) {
    super();
    this.name = "hide-text";
    this.elementId = "";
    this.debugName = "TPHideText";
    this.tTarget = t;
    
    debug("Loading class " +  this.debugName + " := " + this.tTarget );      
}

  static hideToggle(id, buttonId) {
    if (document.getElementById(id).style.display == "none") {
        document.getElementById(id).style.display = "block";
        document.getElementById(buttonId).innerHTML = "✘";
    }
    else {
        document.getElementById(id).style.display = "none";
        document.getElementById(buttonId).innerHTML = "≡";
    }   
  }

  
 render() {
      
      debug("Class " + this.debugName + " starts with loopId: = " + this.loopId);  

      this.template = this.loadDefaultTemplate();
      const nodeList = document.querySelectorAll(this.tTarget);
      //nodeList[nodeList.length - 1].innerHTML += this.template;
      this.hideObj = nodeList[nodeList.length - 1];
      this.hideObj.innerHTML += this.template; 
      this.tTarget  = ".tc-hide-text-frame";
      this.tTarget2 = ".tc-hide-button";

      
      for (let i = this.loopId + 1; i < this.rawText.length - 1; i++) {
          this.loopId = i;
          debug("Class " + this.debugName + " - Target / TextLine :=" + this.tTarget + "  -  " + i + " = " + this.rawText[i]);  
          this.rawCurrentTextLine = this.rawText[i];
          this.renderLine(i);
          if (this.looping) {i = this.loopId;}
          else { i =  this.rawText.length;}
      }
      debug("class " + this.debugName + " finished on line := " + this.loopId); 
      const nodeList2 = document.querySelectorAll(this.tTarget);
      nodeList2[nodeList.length - 1].innerHTML += textile.parse( this.renderBlock) ;

       
      return this.loopId;
  }
  
  renderKeywordLine(n) {
  
       let b = 0;
       
       if (this.rawText[n].substr(0,1) == "..:tcp") {
           
           debug("h3. " + this.debugName + " received a new tcp plugin instance.");
           this.loopId = n;
           
       }
       else {
           //b = this.renderFinalElements(n);
           debug("h3. Render final elements.");
           if (b) {
               //if no final element has been processed, the found keywords needs to be stored. Thus, the next upper element can process this element.
               debug("p. Store command line for handling in upper element.");
               this.upperElement = this.rawText[n];
           }
       }
  }
  
 
 
loadDefaultTemplate() {

this.elementId = this.tcRegister.register('tc-hide-element');
let buttonId = this.tcRegister.register('tc-hide-element-button');

let hideTemplate = `
<div class="tc-hide-template sticky-top" style = "background-color:#f2f2f2;">
    <button type="button" onclick="TPHideText.hideToggle('${this.elementId}', '${buttonId}')" id="${buttonId}">≡</button>
    <div class = "tc-hide-text-frame" id="${this.elementId}" style = "display:none;"></div>
</div>`;

debug(".h2 " + this.debugName + " created the template := <br> <pre>" + hideTemplate + "</pre>");

return hideTemplate;
}

  
// +-----: end of the class definition
}