import { LitElement } from 'lit'
import { edgelCSS } from './utils.js'

export class EdGELElement extends LitElement {
  connectedCallback() {
    if (super.connectedCallback) {
      super.connectedCallback()
    }

    const elName = this.tagName.toLowerCase().replace('edgel-', '')
    const event = new CustomEvent(`connected.edgel.${elName}`, {
      detail: {
        tag: this.tagName
      },
      bubbles: true,
      composed: true
    })

    this.dispatchEvent(event)
  }

  // Add the constructed EdGEL stylesheet to the list of CSS stylesheets
  // adopted in the component.  Since we make use of composition in our
  // custom elements we need to use the Shadow DOM.
  static finalizeStyles(styles) {
    const elementStyles = super.finalizeStyles(styles)
    elementStyles.unshift(edgelCSS())
    return elementStyles
  }
}
