import util from "./util"
import {Settings} from "./settings"

export class TabBarElement extends HTMLElement {
  static observedAttributes = [ "data-adapters", "data-currentadapter" ]
  
  private _adapters: string[] | null = null;
  private _currentAdapter: string | null = null;
  
  constructor() {
    super();
  }
  
  connectedCallback() {
    this.attributeChangedCallback();
    
    if (this._currentAdapter) {
      this.showAdapterFunc(this, this._currentAdapter)();
    } else {
      this.showSettings(this)();
    }
  }
  
  attributeChangedCallback() {
    let html = "<ul><li><a id='tabbar_settings' href='#settings'>settings</a></li>";
    if (!this.getAttribute("data-adapters")) {
      this._adapters = [];
    } else {
      this._adapters = this.getAttribute("data-adapters")?.split(",") ?? [];
    }
    
    this._currentAdapter = this.getAttribute("data-currentadapter");
    if (this._currentAdapter == "") {
      this._currentAdapter = null;
    }
    
    html = this._adapters.reduce((self: string, a: string)=>{
      self += `<li><a id="tabbar_${a}" href="#${a}">${a}</a></li>`;
      return self;
    }, html);
    html += "</ul>";
    
    this.innerHTML = html;
    // now we can query the child elements and add click handlers to them
    var s = util.$("tabbar_settings");
    if (s) {
      s.addEventListener("click", this.showSettings(this), false);
      if (!this._currentAdapter) {
        s.classList.add("tabbar_current");
      }
    }
    for (let i of this._adapters) {
      var a = util.$(`tabbar_${i}`);
      if (a) {
        a.addEventListener("click", this.showAdapterFunc(this, i), false);
        if (this._currentAdapter == i) {
          a.classList.add("tabbar_current");
        }
      }
    }

  }
  
  showSettings(self: TabBarElement): ()=>void {
    return () => {
      let x = util.$("mainarea_injectparent");
      if (x) {
        x.innerHTML = `<underbbs-settings data-adapters=${Settings._instance.adapters.map(a=>a.nickname).join(",") ?? []}></underbbs-settings>`;
        self.setAttribute("data-currentadapter", "");
      }
    }
  }
  
  showAdapterFunc(self: TabBarElement, adapter: string): ()=>void {
    return ()=>{
      let x = util.$("mainarea_injectparent");
      if (x) {
        x.innerHTML = `<underbbs-adapter id="adapter_${adapter}" data-name="${adapter}" data-view=""></underbbs-adapter>`;
        self.setAttribute("data-currentadapter", adapter);
      }
    }
  }
}