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

class FluentFormMessageInternal extends FluentComponent {
  static tag = 'fluent-form-message'

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

  render() {
    this.shadowRootRef.innerHTML = `<div class="msg" part="message" role="status"><slot></slot></div>`
  }

  constructor() {
    super()
    this.recipe = { base: { display: 'block' }, selectors: { '.msg': { color: 'var(--fluent-color-danger-500)', 'font-size': '0.875rem' } } }
  }

  override attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
    super.attributeChangedCallback(name, oldValue, newValue)
    const id = this.getAttribute('for') || ''
    const el = document.getElementById(id) as HTMLElement | null
    const invalid = el?.classList.contains('invalid')
    this.toggleAttribute('hidden', !invalid)
  }
}

export const FluentFormMessage = createUniversalComponent({
  tag: 'fluent-form-message',
  class: FluentFormMessageInternal
})

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