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

class FluentSelectInternal extends FluentComponent {
  static tag = 'fluent-select'

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

  static override get renderAttributes() {
    return ['disabled']
  }

  render() {
    const disabled = this.hasAttribute('disabled') ? 'disabled' : ''
    this.shadowRootRef.innerHTML = `
      <style>
        :host { display: inline-block; }
        .fluent-select {
          padding: 0.5rem 0.75rem; border-radius: 0.5rem;
          border: 1px solid var(--fluent-color-neutral-300); background: light-dark(white, var(--fluent-color-neutral-900));
          color: light-dark(var(--fluent-color-neutral-900), var(--fluent-color-neutral-50));
        }
      </style>
      <select class="fluent-select" part="select" ${disabled}><slot></slot></select>
    `
  }
}

export const FluentSelect = createUniversalComponent({
  tag: 'fluent-select',
  class: FluentSelectInternal,
  events: ['change']
})

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