// Toolbar component logic

class Toolbar extends HTMLElement {
  constructor() {
    super();

    // Attach a shadow root and clone the template defined in toolbar.html
    this.attachShadow({ mode: 'open' });
    const tmpl = document.getElementById('toolbar-template');
    if (!tmpl) {
      console.error('Toolbar: template not found in DOM');
      return;
    }
    this.shadowRoot.appendChild(tmpl.content.cloneNode(true));

    // Bind internal handlers
    this._onColorChange = this._onColorChange.bind(this);
    this._onGridChange = this._onGridChange.bind(this);
  }

  connectedCallback() {
    // Listen for events bubbled up from slotted child components
    this.addEventListener('colorchange', this._onColorChange);
    this.addEventListener('gridchange', this._onGridChange);
  }

  disconnectedCallback() {
    // Clean up listeners when the element is removed
    this.removeEventListener('colorchange', this._onColorChange);
    this.removeEventListener('gridchange', this._onGridChange);
  }

  // Forward background color changes as a toolbar‑specific event
  _onColorChange(e) {
    this.dispatchEvent(
      new CustomEvent('bgcolorchange', {
        detail: e.detail,
        bubbles: true,
        composed: true,
      })
    );
  }

  // Forward grid setting changes as a toolbar‑specific event
  _onGridChange(e) {
    this.dispatchEvent(
      new CustomEvent('gridsettingschange', {
        detail: e.detail,
        bubbles: true,
        composed: true,
      })
    );
  }
}

// Register the custom element; the tag name follows kebab‑case convention
customElements.define('toolbar-component', Toolbar);