import { LitElement, html, nothing } from 'lit'
import { customElement, queryAsync, property } from 'lit/decorators.js'
import { EventEmitterMixin } from '../EventEmitterMixin'
import { setupMenuForAria, toggleMenu } from '../dom/popupMenu'

@customElement('btu-dropdown')
export default class Dropdown extends EventEmitterMixin(LitElement) {
  @queryAsync('.Dropdown-container')
  _dropdownContainer?: Promise<HTMLElement>

  @property({ type: Boolean })
  isEmpty = false

  connectedCallback(): void {
    super.connectedCallback()

    this._dropdownContainer?.then((container) => {
      if (!container) return
      const dropdownButton = container.querySelector('.Dropdown-button')
      const dropdown = container.querySelector<HTMLElement>('.Dropdown')
      const isV5 = window.BRIGHTSPOT?.ui.cms.enableV5UI

      if (isV5) dropdown?.setAttribute('popover', '')

      dropdownButton?.addEventListener('click', () => {
        toggleMenu(dropdown, dropdownButton)
        setupMenuForAria(dropdown, dropdownButton)
        isV5 && dropdown?.togglePopover()
      })
    })
  }

  disconnectedCallback(): void {
    super.disconnectedCallback()

    this._dropdownContainer?.then((container) => {
      if (!container) return
      const dropdownButton = container.querySelector('.Dropdown-button')
      const dropdown = container.querySelector('.Dropdown')

      dropdownButton?.removeEventListener('click', () => {
        toggleMenu(dropdown, dropdownButton)
        setupMenuForAria(dropdown, dropdownButton)
      })
    })
  }

  firstUpdated() {
    this._dropdownContainer?.then((container) => {
      const items = this.querySelectorAll<HTMLLIElement>(':scope > li')

      items.forEach((item: HTMLLIElement) => {
        this._addDropdownItem(item)
      })

      const dropdown = container.querySelector('.Dropdown')
      this.isEmpty = dropdown?.children.length === 0
    })
  }

  _addDropdownItem(item: HTMLElement) {
    if (item?.childNodes.length) {
      this._dropdownContainer?.then((container) => {
        const dropdown = container.querySelector('.Dropdown')
        const action = item.querySelector(':scope > a, :scope > button')

        action?.classList.add('Dropdown-item')
        action?.setAttribute('role', 'menuitem')

        dropdown?.appendChild(item)
      })
    }
  }

  createRenderRoot() {
    return this
  }

  render() {
    if (this.isEmpty) return nothing

    return html`<div class="Dropdown-container">
      <button
        class="Dropdown-button"
        title=${window.BRIGHTSPOT?.ui.tooltips.actions?.actions}
        type="button"
        aria-label=${window.BRIGHTSPOT?.ui.tooltips.actions?.contentSelector}
        aria-haspopup="menu"
        aria-expanded="false"
      ></button>
      <ul
        class="Dropdown"
        role="menu"
        aria-orientation="vertical"
        aria-label=${window.BRIGHTSPOT?.ui.tooltips.actions?.actions}
      ></ul>
    </div>`
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'btu-dropdown': Dropdown
  }
}
