/**
 * EdGEL hamburger toggle component.
 *
 * We use the Collapse plugin instead of the EdGEL Hamburger plugin since
 * we are able to use LitElement to manage the hamburger icon state
 */

import { css, html } from 'lit'
import { classMap } from 'lit/directives/class-map.js'
import { EdGELCollapse } from '../collapse.js'

export class EdGELHamburger extends EdGELCollapse {
  static properties = {
    expanded: { type: Boolean, reflect: true, attribute: 'expanded' },
    colour: { type: String, attribute: 'colour' },
    controls: { type: String, attribute: 'controls' },
    parent: { type: String, attribute: 'parent' }
  }
  static styles = [
    css`::slotted(*) { color: var(--edgel-hamburger-colour, inherit); }`,
    css`:host { display: inline-block; }`
  ]

  constructor() {
    super()

    this.expanded = false
    this.colour = 'dark'

    this.collapseInternal = false
  }

  render() {
    const classes = {
      hamburger: true,
      'hamburger-expanded': this.expanded
    }

    // Ensure colour attribute value is safe
    const colour = `${this.colour}`.replaceAll(/[^a-z-]/g, '')

    if (!this.controls) {
      throw new Error('Missing "controls" attribute')
    }

    const buttonClass = `btn-${colour} w-100`
    const buttonContent = html`
      <span class=${classMap(classes)} aria-hidden="true"></span>
      <slot></slot>
    `

    return html`
      <span class="edgel-js">
        ${this.buttonHtml(buttonContent, buttonClass)}
      </span>
    `
  }
}
