# Textarea — accessible headless auto-resizing text area
#
# Tracks focus, validation, and disabled state via data attributes.
# Optional auto-resize adjusts height to fit content. Ships zero CSS.
#
# Usage:
#   Textarea value <=> bio, placeholder: "Tell us about yourself"
#   Textarea value <=> notes, autoResize: true, rows: 3

export Textarea = component
  @value:: string := ""
  @placeholder:: string := ""
  @disabled:: boolean := false
  @required:: boolean := false
  @rows:: number := 3
  @autoResize:: boolean := false

  focused := false
  touched := false

  onInput: (e) ->
    @value = e.target.value
    @_resize(e.target) if @autoResize

  onFocus: -> focused = true
  onBlur: ->
    focused = false
    touched = true

  _resize: (el) ->
    el.style.height = 'auto'
    el.style.height = "#{el.scrollHeight}px"

  mounted: ->
    @_resize(@_root) if @autoResize and @value

  render
    textarea ref: "_root", value: @value, placeholder: @placeholder, rows: @rows
      disabled: @disabled
      required: @required
      aria-disabled: @disabled?!
      aria-required: @required?!
      $disabled: @disabled?!
      $focused: focused?!
      $touched: touched?!
      @input: @onInput
      @focusin: @onFocus
      @focusout: @onBlur
