export class NavMenu extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.language = navigator.language
    this.pages = []
  }

  connectedCallback() {
    const style = document.createElement('style')
    style.textContent = `
      :host {
        display: flex;
        flex-direction: column;
        color: #000;
        max-height: 100dvh;
      }
      h1 {
        width: 100%;
        text-align: center;
        font-size: 18px;
        margin: 0;
        padding: 5px;
      }
      .page-list {
        flex-grow: 1;
        overflow-y: auto;
        padding-bottom: 50px;
      }
      a {
        display: block;
        margin: 8px 10px;
      }
    `
    this.shadowRoot.append(style)
    this.header = document.createElement('h1')
    this.header.innerText = this.pagesText
    this.shadowRoot.append(this.header)
    this.pageList = document.createElement('div')
    this.pageList.classList.add('page-list')
    this.shadowRoot.append(this.pageList)
    this.renderPageList()
    this.shadowRoot.addEventListener('click', e => {
      if (e.target.classList.contains('page')) {
        this.dispatchEvent(new CustomEvent(
          'close-menu', {bubbles: true}
        ))
      }
    })
  }

  get language() {
    return this._language
  }

  set language(language) {
    this._language = language
  }

  get langEs() {
    return /^es\b/.test(this.language)
  }

  get pagesText() {
    return this.langEs ? 'Páginas' : 'Pages'
  }

  set pages(pages) {
    this._pages = pages
    if (this.pageList) {
      this.renderPageList()
    }
  }

  get pages() {
    return this._pages
  }

  renderPageList() {
    const els = this.pages.map(page => {
      const el = document.createElement('a')
      el.href = `#${page.replace(/^#/, '%23')}`
      el.innerText = page
      el.classList.add('page')
      return el
    })
    this.pageList.replaceChildren(...els)
  }
}