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

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

  flex() {
    this.addClass('flex');
    return this;
  }

  monospace() {
    this.addClass('monospace');
    return this;
  }

  hidden() {
    this.addClass('hidden');
    return this;
  }

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

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

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

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

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