export class DisplayValue {
  constructor(name, box) {
    this.value = undefined;
    this.name = name;
    this.box = box;
    this.nameBox = this.box.addBox(`${this.name}-name`).addClass('name');
    this.valueBox = this.box.addBox(`${this.name}-value`).addClass('value');
    this.nameBox.setInnerHTML(this.name);
  }

  render() {
    this.valueBox.setInnerHTML(this.value);
  }

  set(value) {
    this.value = value;
    this.render();
  }

  get() {
    return this.value;
  }
}

export class Box {
  constructor(name, parentEl) {
    this.el = document.createElement('div');
    this.el.classList.add('box');
    this.el.setAttribute('box-name', name);
    if (parentEl) {
      parentEl.appendChild(this.el);
    }
  }

  flex() {
    this.el.classList.add('flex');
    return this;
  }

  monospace() {
    this.el.classList.add('monospace');
    return this;
  }

  addClass(className) {
    this.el.classList.add(className);
    return this;
  }

  addBox(name) {
    const box = new Box(name);
    this.el.appendChild(box.el);
    return box;
  }

  addDisplayValue(value) {
    const box = this.addBox(value.name).flex();
    return new DisplayValue(value, box);
  }

  setInnerHTML(html) {
    this.el.innerHTML = html;
    return this;
  }
}