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

class FluentCheckboxGroupInternal extends FluentComponent {
  static tag = 'fluent-checkbox-group'

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

  override connectedCallback() {
    super.connectedCallback()
    this.addEventListener('change', () => this.update())
  }

  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.update()
  }

  private update() {
    const name = this.getAttribute('name') || ''
    const min = Number(this.getAttribute('min') || '0')
    const items = Array.from(this.querySelectorAll('fluent-checkbox')) as HTMLElement[]
    const checked = items.filter(el => el.hasAttribute('checked'))
    if (name) items.forEach(el => el.setAttribute('name', name))
    const values = checked.map(el => (el.textContent || '').trim())
    this.setAttribute('values', values.join(','))
    const valid = checked.length >= min
    this.toggleAttribute('data-valid', valid)
  }
}

export const FluentCheckboxGroup = createUniversalComponent({
  tag: 'fluent-checkbox-group',
  class: FluentCheckboxGroupInternal
})

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