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

class FluentTextareaInternal extends FluentComponent {
  static tag = 'fluent-textarea'

  static override get observedAttributes() {
    return ['placeholder', 'disabled', 'name', 'rows']
  }

  render() {
    const placeholder = this.getAttribute('placeholder') || ''
    const disabled = this.hasAttribute('disabled') ? 'disabled' : ''
    const rows = this.getAttribute('rows') || '3'
    const name = this.getAttribute('name') || ''
    this.shadowRootRef.innerHTML = `<textarea class="ta" part="textarea" placeholder="${placeholder}" rows="${rows}" name="${name}" ${disabled}></textarea>`
  }

  constructor() {
    super()
    this.recipe = {
      base: { display: 'inline-block', width: '100%' },
      selectors: { '.ta': { width: '100%', padding: '0.5rem 0.75rem', border: '1px solid var(--fluent-color-neutral-300)', 'border-radius': '0.5rem' } }
    }
  }
}

export const FluentTextarea = createUniversalComponent({
  tag: 'fluent-textarea',
  class: FluentTextareaInternal
})

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