export class PageMenu extends HTMLElement {
  icons = {}

  textEn = {
    download: 'Download',
  }

  textEs = {
    download: 'Descargar',
  }

  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.language = navigator.language
  }

  connectedCallback() {
    const style = document.createElement('style')
    style.textContent = `
      :host {
        background: #222;
        color: #ddd;
        padding: 3px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 180px;
      }
      button {
        background: #222;
        font-size: 120%;
        border: none;
        color: inherit;
        padding: 4px 10px;
        text-align: left;
      }
    `
    this.shadowRoot.append(style)
  }

  add(name, handler) {
    const btn = document.createElement('button')
    btn.innerText = this.text[name]
    this.shadowRoot.appendChild(btn)
    btn.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent(
        'close-menu', {bubbles: true}
      ))
      handler()
    })
  }

  get language() {
    return this._language
  }

  set language(language) {
    this._language = language
    this.text = this.langEs ? this.textEs : this.textEn
  }

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