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

class FluentRadioGroupInternal extends FluentComponent {
  static tag = 'fluent-radio-group'

  static override get observedAttributes() {
    return ['name', 'value']
  }

  override connectedCallback() {
    super.connectedCallback()
    this.addEventListener('change', (e: any) => {
      const val = e.detail?.value
      if (val !== undefined) {
        this.setAttribute('value', val)
        this.sync()
      }
    })
  }

  render() {
    this.shadowRootRef.innerHTML = `<div class="group"><slot></slot></div>`
  }

  constructor() {
    super()
    this.recipe = { base: { display: 'grid', gap: '0.5rem' } }
  }

  override attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
    super.attributeChangedCallback(name, oldValue, newValue)
    this.sync()
  }

  private sync() {
    const name = this.getAttribute('name') || ''
    const value = this.getAttribute('value') || ''
    const items = Array.from(this.querySelectorAll('fluent-radio')) as HTMLElement[]
    items.forEach(el => {
      if (name) el.setAttribute('name', name)
      const v = el.getAttribute('value') || ''
      if (v === value) el.setAttribute('checked', '')
      else el.removeAttribute('checked')
    })
  }
}

export const FluentRadioGroup = createUniversalComponent({
  tag: 'fluent-radio-group',
  class: FluentRadioGroupInternal
})

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