import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'
import { ComponentStatesMixin } from '../ComponentStatesMixin'
import { EventEmitterMixin } from '../EventEmitterMixin'
import './index.css'

@customElement('btu-nav-rail')
export default class NavRail extends ComponentStatesMixin(
  EventEmitterMixin(LitElement),
) {
  static get tagName() {
    return 'BTU-NAV-RAIL'
  }

  public addItem(item: HTMLElement) {
    const list = this.querySelector(':scope > ul')
    if (!list) return
    if (!(item instanceof HTMLLIElement)) {
      const li = document.createElement('li')
      li.append(item)
      list.appendChild(li)
    } else {
      list.appendChild(item)
    }
  }

  createRenderRoot() {
    return this
  }

  render() {
    return html``
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'btu-nav-rail': NavRail
  }
}
