export class TimelineFilter {
  public name: string = "";
  public filter: string = "";
}

export class TimelineFilterElement extends HTMLElement {
  static observedAttributes = [ "data-filters", "data-target", "data-latest" ];
  
  private _filters: TimelineFilter[] = [];
  private _target: string = "";
  
  constructor() {
    super();
    this.innerHTML = "<select class='filter_select'></select>"

  }
  
  connectedCallback() {
    this._target = this.getAttribute("data-target") ?? "";
    this._filters = (this.getAttribute("data-filters") ?? "").split("/").map(f=>{
      const ff = f.split("::");
      return <TimelineFilter>{ name: ff[0], filter: ff[1] };
    });
    let html = "<select class='filter_select'>";
    html += this._filters.reduce((self: string, f: TimelineFilter)=>{
      self += `<option value='${f.filter}'>${f.name}</option>`;
      return self;
    }, "");
    html += "</select>";
    this.innerHTML = html;
    const select = this.querySelector(".filter_select");
    if (select) {
      select.addEventListener("change", this.onChanges.bind(this));
    }
  }
  
  onChanges() {
    const select = this.querySelector(".filter_select") as HTMLSelectElement;
  
    // change target's target!
    const target = document.getElementById(this._target);
    if (target) {
      target.setAttribute("data-target", select?.options[select.selectedIndex].value)
    }
  }
  
  attributeChangedCallback(attr: string, prev: string, next: string) {
    switch (attr) {
      case "data-latest":
        const select = this.querySelector(".filter_select") as HTMLSelectElement;
        select.selectedIndex = this._filters.findIndex(f=>f.name == next);
        break;
    }
  }
}