# Toolbar — accessible headless toolbar
#
# Groups interactive controls with roving tabindex keyboard navigation.
# Arrow keys move focus between focusable children. Ships zero CSS.
#
# Usage:
#   Toolbar
#     Button @click: save, "Save"
#     Button @click: undo, "Undo"
#     Separator orientation: "vertical"
#     Toggle pressed <=> isBold, "Bold"

export Toolbar = component
  @orientation := 'horizontal'
  @label := ''

  _getFocusable: ->
    return [] unless @_root
    Array.from(@_root.querySelectorAll('button, [tabindex], input, select, textarea')).filter (el) ->
      not el.disabled and el.offsetParent isnt null

  onKeydown: (e) ->
    els = @_getFocusable()
    return unless els.length
    focused = els.indexOf(document.activeElement)
    return if focused < 0
    len = els.length
    horiz = @orientation is 'horizontal'
    switch e.key
      when (if horiz then 'ArrowRight' else 'ArrowDown')
        e.preventDefault()
        els[(focused + 1) %% len]?.focus()
      when (if horiz then 'ArrowLeft' else 'ArrowUp')
        e.preventDefault()
        els[(focused - 1) %% len]?.focus()
      when 'Home'
        e.preventDefault()
        els[0]?.focus()
      when 'End'
        e.preventDefault()
        els[len - 1]?.focus()

  render
    div role: "toolbar", aria-label: @label or undefined, aria-orientation: @orientation
      $orientation: @orientation
      slot
