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

class FluentTextInternal extends FluentComponent {
  static tag = 'fluent-text'

  static override get observedAttributes() {
    return ['size', 'weight']
  }

  render() {
    const size = this.getAttribute('size') || 'md'
    const weight = this.getAttribute('weight') || 'normal'
    this.shadowRootRef.innerHTML = `<span class="txt ${size} ${weight}"><slot></slot></span>`
  }

  constructor() {
    super()
    this.recipe = {
      base: { display: 'inline' },
      selectors: {
        '.txt': { color: 'light-dark(var(--fluent-color-neutral-900), var(--fluent-color-neutral-50))' },
        '.txt.sm': { fontSize: '0.875rem' },
        '.txt.md': { fontSize: '1rem' },
        '.txt.lg': { fontSize: '1.125rem' },
        '.txt.bold': { fontWeight: '700' }
      }
    }
  }
}

export const FluentText = createUniversalComponent({
  tag: 'fluent-text',
  class: FluentTextInternal
})

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