class App {
  constructor (parent) {
    this.parent = document.querySelector(parent)
    this.trialArray = [];
  }

  create() {
    this.parent.innerHTML = '';

    let div = myApp.make('div', this.parent, 'trial-div header')
    let title = myApp.make('div', div, 'trial-title header')
        title.innerText = 'Vaccine';
    let phases = myApp.make('div', div, 'trial-phases header')
    let stages = ['Pre-Trial', 'I', 'II', 'III', 'Approved']
    for (let i = 0; i < 5; i++) {
      myApp.make('div', phases, `phase header`).innerText = stages[i]
    }

    fetch('https://beta.ctvnews.ca/content/dam/common/exceltojson/Vaccine%20tracker.txt')
      .then(response => response.json())
      .then(data => {
        data = data.map(V => {
          return {
            phase: Number(V.Phases),
            name: V.Name + ' ' + V.Vaccine,
            blurb: V.Text
          }          
        })
        data.forEach(V => new Trial(V.phase, V.name, V.blurb))
        this.trialArray.forEach(trial => trial.create(this.parent))
      })
  }

  make(type, parent, CLASS=null, ID=null) {
    let element = document.createElement(type);
    ID ? element.setAttribute('class', CLASS) : null;
    CLASS ? element.setAttribute('class', CLASS) : null;
    return parent.appendChild(element);
  }
}

class Trial {
  constructor(phase, name, blurb) {
    this.phase = phase;
    this.name = name;
    this.blurb = blurb;

    this.open = false;
    myApp.trialArray.push(this)
  }

  create(parent) {
    let div = myApp.make('div', parent, 'trial-div')
    let title = myApp.make('div', div, 'trial-title')
        title.innerText = this.name;
    let phases = myApp.make('div', div, 'trial-phases')

    for (let i = 0; i < this.phase; i++) {
      myApp.make('div', phases, `phase p${i+1}`)
    }

    let button = myApp.make('div', div, 'trial-button')
        button.innerText = '▼'
    
    let blurb = myApp.make('div', div, 'trial-blurb')
        blurb.style.height = 0;
    //let blurbTitle = myApp.make('div', blurb, 'trial-blurb-title')
    //    blurbTitle.innerText = this.stage;
    let blurbText = myApp.make('div', blurb, 'trial-blurb-text')
        blurbText.innerHTML = this.blurb;

    button.onclick = () => {
      if (this.open) {
        blurb.style.height = 0;
        blurb.style.margin = 0;
        blurb.style.paddingTop = 0;
        blurb.style.borderTop = `0px solid #f3f3f3`;
      } else {
        blurb.style.height = 'auto';
        blurb.style.margin = '0 20px 10px';
        blurb.style.paddingTop = '10px';
        blurb.style.borderTop = `1px solid #f3f3f3`;
      }
      this.open = !this.open;
      button.innerText = this.open ? '▲' : '▼';
    }
  }
}

let myApp = new App('.vaccine-div');
myApp.create()