import { Tool } from '../tool.js';

export class Header extends Tool {
  expanded = true;

  constructor(toolbar, title = 'Tools') {
    super(toolbar);

    this.title = document.createElement('h1');
    this.title.innerHTML = title;

    this.toggleButton = document.createElement('button');
    this.updateButton();
    this.toggleButton.addEventListener('click', () => this.toggle());

    this.div.appendChild(this.title);
    this.div.appendChild(this.toggleButton);

    this.title.style.verticalAlign = 'center';
    this.toggleButton.style.width = '3EM';
    this.div.style.display = 'flex';
    this.div.style.justifyContent = 'space-around';
  }

  updateButton() {
    this.toggleButton.innerHTML = this.expanded ? '˄' : '˅';
  }

  toggle() {
    this.expanded = !this.expanded;
    this.updateButton();
    this.apply();
  }

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