//@ts-check
import {fetchText} from '../modules/fetchText.mjs'
import {parseFileList} from '../modules/parseFileList.mjs'
import {html} from '../modules/html.mjs'

const indexListTemplate = html`<p><slot>Hello World!</slot></p>`

class IndexList extends HTMLElement {
  
  static template = indexListTemplate
  static observedAttributes = ["src"];

  static define(tag = "index-list") {
    customElements.define(tag, this)
  }

  shadowRoot = this.shadowRoot || this.attachShadow({ mode: "open" })
  src = ""

  connectedCallback() {
    this.shadowRoot.replaceChildren(IndexList.template.content.cloneNode(true))
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue) {
      return;
    }
    switch (name) {
      case "src":
        this.src = newValue
        fetchText(newValue).then(parseFileList).then()
    }
  }
}