class DisplayPanel {
  constructor (el, parent) {
    this.el = el;
    el.innerHTML = '1111';
    this.parent = parent;
    this.update();
  }
  
  update () {
    var parent = this.parent;    
    this.el.innerHTML = `Revealed boxes: ${parent.revealed} / ${parent.total}`;
  }
}

class SpoilerAlert {
  constructor (el, parent) {
    this.el = el;
    this.el.innerHTML = `Spoiler Alert <button>Click To Reveal</button>`;
    this.el.querySelector('button').addEventListener('click', this.reveal.bind(this));
    this.spoilerText = el.dataset.text;
    this.parent = parent;
  }
  
  reveal (ev) {
    this.el.textContent = this.spoilerText;
    this.parent.notifyReveal();
  }
}

class ParagraphWithSpoilers {
  constructor (el) {
    const displayDiv = document.createElement('div');
    displayDiv.classList.add('display');
    el.insertBefore(displayDiv, el.firstChild); 
    const spoilerElements = Array.from(el.querySelectorAll('.spoiler'));
    this.spoilers = [];
    
    for (el of spoilerElements) {
      this.spoilers.push(new SpoilerAlert(el, this));
    } 
    
    this.total = this.spoilers.length;
    this.revealed = 0;

    this.displayPanel = new DisplayPanel(displayDiv, this);
  }
  
  notifyReveal () {
    this.revealed += 1;
    this.displayPanel.update();
  }
}

new ParagraphWithSpoilers(document.querySelector('p'));