import { DisplayValue } from './display-value.js';

export class Box {
  constructor(name, parentEl, elementType = 'div') {
    this.name = name;
    this.el = document.createElement(elementType);
    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, elementType) {
    const box = new Box(name, null, elementType);
    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;
  }

  getInnerText() {
    return this.el.innerText;
  }

  setId(id) {
    this.el.id = (id || this.name).replace(/ /g, '');
    return this;
  }

  getId() {
    return this.el.id;
  }
}