import {
  TOOLBAR_CLASSNAME,
} from './config.js';
import {Header} from './tool/header.js';

export class Toolbar {
  sim = undefined;
  tools = [];
  expanded = undefined;
  header = undefined;

  constructor(sim, title, { expanded } = {}) {
    this.sim = sim;
    this.expanded = expanded ?? true;

    // Create ourselves a div, as child of sim's div
    const div = document.createElement('div');
    this.div = div;
    div.classList.add(TOOLBAR_CLASSNAME);

    // Create a collapse/expand tool
    const header = new Header(this, title);
    this.header = header;
    this.addTool(header);
  }

  // tool: instance of Tool
  addTool(tool) {
    this.div.appendChild(tool.div);
    this.tools.push(tool);
    return this;
  }

  frame() {
    for (let tool of this.tools) {
      tool.frame();
    }
  }

  applyExpanded() {
    for (const tool of this.tools) {
      if (tool === this.header) continue;
      if (this.expanded) {
        if (!this.div.contains(tool.div)) {
          this.div.appendChild(tool.div);
        }
      } else {
        if (this.div.contains(tool.div)) {
          this.div.removeChild(tool.div);
        }
      }
    }
  }
}