{% load assets i18n %}
<div>
  {% if title %}
    <h2 class="cell--title">{{ title }}</h2>
  {% endif %}

  <div class="cell--body">
    <donna-selectlinks>
      <button
        type="button"
        aria-expanded="false"
        aria-controls="disclosure-{{ cell.id }}"
        class="donna-selectlinks--widget-toggle"
        aria-description="Ouverture du menu de recherche de commune"
        aria-label="Rechercher une commune"
      >Rechercher une commune</button>

      <div class="donna-selectlinks--disclosure" hidden id="disclosure-{{ cell.id }}">
        <input class="donna-selectlinks--input" type="search" autocomplete="off" aria-describedby="search-help-{{ cell.id }}" placeholder="Rechercher une commune" aria-label="Rechercher une commune">
        <button type="button" aria-expanded="false" aria-controls="disclosure-{{ cell.id }}" class="donna-selectlinks--close-button"><span class="sr-only">Fermer le menu</span></button>
        <ul class="donna-selectlinks--list">
          {% for link in links %}
            <li class="donna-selectlinks--list-item" data-id="link-{{ link.cell.id }}">
              <a class="donna-selectlinks--list-link" href="{{ link.url }}" {% if link.url == request.path %}aria-current="page"{% endif %}>{{ link.title }}</a>
            </li>
          {% endfor %}
        </ul>
        <p id="search-help-{{ cell.id }}" class="sr-only">
          Une liste de liens en rapport avec votre saisie apparaîtra sous le champ de recherche lors de votre saisie.
          Elle sera mise à jour à chaque caractère saisi et vous pouvez utiliser la touche Tabulation pour y accéder.
        </p>
        <p class="sr-only" aria-live="polite"></p>
      </div>
    </donna-selectlinks>
  </div>
</div>

<script defer>
  const NO_RESULT_TEXT = 'Pas de résultat…'

  class DonnaSelectLinks extends HTMLElement {
    connectedCallback() {
      this.buttonEl = this.querySelector('.donna-selectlinks--widget-toggle')
      this.closeButtonEl = this.querySelector('.donna-selectlinks--close-button')
      this.popoverEl = this.querySelector('.donna-selectlinks--disclosure')
      this.inputEl = this.querySelector('.donna-selectlinks--input')
      this.listEl = this.querySelector('.donna-selectlinks--list')
      this.ariaPoliteEl = this.querySelector('[aria-live="polite"]')
      this.escapeEventAction = event => {
        if (event.key == 'Escape') {
          this.closePopover()
        }
      }
      this.outsideClickAction = event => {
        if(!this.contains(event.target)) {
          this.closePopover()
        }
      }

      this.options = [...this.listEl.children].map(item => {
        const link = item.querySelector('a')
        return {
          id: item.dataset.id,
          href: link.href,
          text: link.textContent,
          slug: window.gadjo_js.slugify(link.textContent),
          current: link.getAttribute('aria-current') === 'page'
        }
      })

      this.currentPageEl = this.querySelector('.donna-selectlinks--list-link[aria-current="page"]')
      this.currentText = this.currentPageEl?.textContent

      if (this.currentText) {
        this.buttonEl.textContent = this.currentText
        this.buttonEl.setAttribute('aria-label', `Rechercher une commune : actuellement ${ this.currentText }`)
        this.inputEl.setAttribute('placeholder', this.currentText)
      }

      this.buttonEl.addEventListener('click', () => {
        if (this.buttonEl.getAttribute('aria-expanded') == 'false') {
          this.openPopover()
        } else {
          this.closePopover()
        }
      })

      this.closeButtonEl.addEventListener('click', () => {
        this.buttonEl.click()
      })

      this.inputEl.addEventListener('input', event => this.handleInputChange(event))

    }

    openPopover() {
      this.buttonEl.setAttribute('aria-expanded', 'true')
      this.closeButtonEl.setAttribute('aria-expanded', 'true')
      this.popoverEl.hidden = false
      this.inputEl.focus()
      window.addEventListener('keydown', this.escapeEventAction)
      document.addEventListener('click', this.outsideClickAction)
    }

    closePopover() {
      this.buttonEl.setAttribute('aria-expanded', 'false')
      this.closeButtonEl.setAttribute('aria-expanded', 'false')
      this.popoverEl.hidden = true
      this.populateList(this.options, '')
      this.inputEl.value = ''
      window.removeEventListener('keydown', this.escapeEventAction)
      document.removeEventListener('click', this.outsideClickAction)
      this.buttonEl.focus()
    }

    populateList(list, markedText) {
      const markedLength = markedText.length || 0
      this.listEl.innerHTML = ''
      list.forEach(item => {
        const newItem = document.createElement('li')
        const newLink = document.createElement('a')

        newLink.href = item.href
        newLink.innerHTML = `<mark>${item.text.substring(0, markedLength)}</mark>${item.text.substring(markedLength)}`
        newItem.id = item.id
        if (item.current) {
          newLink.setAttribute('aria-current', 'page')
        }
        newItem.append(newLink)
        newItem.classList.add('donna-selectlinks--list-item')
        newLink.classList.add('donna-selectlinks--list-link')
        this.listEl.append(newItem)
      })
      if (list.length == 0) {
        const noResultEl = document.createElement('li')
        noResultEl.textContent = NO_RESULT_TEXT
        this.listEl.append(noResultEl)
        this.ariaPoliteEl.textContent = NO_RESULT_TEXT
      }
    }

    handleInputChange(event) {
      if (event.target.value != '') {
        const needle = window.gadjo_js.slugify(event.target.value)
        const filtered = this.options.filter(item => item.slug.startsWith(needle))

        this.populateList(filtered, needle)
      } else {
        this.populateList(this.options, '')
      }
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    customElements.define('donna-selectlinks', DonnaSelectLinks)
  })
</script>