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 = "Treatment";
    let phases = myApp.make("div", div, "trial-phases header");
    let stages = ["Pre-Trial", "I", "II", "III", "Status"];
    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/Treatment%20Tracker.txt")
      .then((response) => response.json())
      .then((data) => {
        data = data.filter((line) => line.Name !== "");
        data = data.map((V) => {
          return {
            phase: Number(V.Phase),
            name: V.Name,
            blurb: V.Text,
            approval: V.Approval,
          };
        });
        data.forEach((V) => new Trial(V.phase, V.name, V.blurb, V.approval));
        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, approval) {
    this.phase = phase;
    this.name = name;
    this.blurb = blurb;
    this.approval = approval;

    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");
    let approval = this.approval ? this.approval.toLowerCase() : "";

    for (let i = 0; i < 4; i++) {
      myApp.make(
        "div",
        phases,
        `phase ${i <= this.phase ? "p" + (i + 1) : ""} ${approval}`
      );
    }
    myApp.make("div", phases, `phase status ${approval}`);

    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();