import { FluentComponent } from '../core/fluent-component'
import { createUniversalComponent } from '../core/component-factory'

class FluentLabelInternal extends FluentComponent {
  static tag = 'fluent-label'

  static override get observedAttributes() {
    return ['for']
  }

  override connectedCallback() {
    super.connectedCallback()
    this.shadowRootRef.addEventListener('click', () => {
      const id = this.getAttribute('for') || ''
      const el = document.getElementById(id) as HTMLElement | null
      el?.focus()
    })
  }

  render() {
    this.shadowRootRef.innerHTML = `<label class="lbl" part="label"><slot></slot></label>`
  }

  constructor() {
    super()
    this.recipe = {
      base: { display: 'inline-block' },
      selectors: { '.lbl': { fontWeight: '600' } }
    }
  }
}

export const FluentLabel = createUniversalComponent({
  tag: 'fluent-label',
  class: FluentLabelInternal
})

if (typeof window !== 'undefined') {
  if (!customElements.get(FluentLabelInternal.tag)) {
    customElements.define(FluentLabelInternal.tag, FluentLabelInternal)
  }
}