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

export class Header extends Tool {
  constructor(container, title = 'Tools') {
    super(container);
    this.title = document.createElement('h1');
    this.title.innerHTML = title;

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

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

    this.div.style.display = 'flex';
    this.div.style.justifyContent = 'space-around';
    this.title.style.width = '9EM';
    this.toggleButton.style.width = '3EM';
    this.div.classList.add(TOOLBAR_HEADER_CLASSNAME);
  }

  setContainer(container) {
    super.setContainer(container);
    this.updateButton();
  }

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

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