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

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

  // TODO: Index on something more durable than title
  getExpandedKey() {
    return [this.title, TOOLBAR_EXPANDED_SUFFIX].join(':');
  }

  constructor(sim, title) {
    this.sim = sim;
    this.title = title;
    this.expanded = window.localStorage.getItem(this.getExpandedKey()) === '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);

    header.updateButton();
    this.applyExpanded();
  }

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

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

  applyExpanded() {
    window.localStorage.setItem(this.getExpandedKey(), this.expanded);
    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);
        }
      }
    }
  }
}