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

class FluentAccordionInternal extends FluentComponent {
  static tag = 'fluent-accordion'

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

  override connectedCallback() {
    super.connectedCallback()
    this.addEventListener('click', (e) => {
      const t = e.target as HTMLElement
      if (t.matches('.accordion-header')) this.toggleAttribute('open')
    })
  }

  render() {
    const open = this.hasAttribute('open')
    this.shadowRootRef.innerHTML = `
      <style>
        :host { display: block; }
        .accordion-header { cursor: pointer; padding: 0.75rem; border: 1px solid var(--fluent-color-neutral-300); }
        .accordion-panel { display: none; padding: 0.75rem; border: 1px solid var(--fluent-color-neutral-200); border-top: none; }
        .accordion-panel.show { display: block; }
      </style>
      <div class="accordion">
        <div class="accordion-header"><slot name="header">Section</slot></div>
        <div class="accordion-panel ${open ? 'show' : ''}"><slot></slot></div>
      </div>
    `
  }
}

export const FluentAccordion = createUniversalComponent({
  tag: 'fluent-accordion',
  class: FluentAccordionInternal
})

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