import type { Directive } from 'vue'

export const vQuantKeyboardNav: Directive = {
  mounted(el: HTMLElement) {
    el.addEventListener('keydown', (e: KeyboardEvent) => {
      if (e.key === 'Enter') {
        const inputs = Array.from(el.querySelectorAll('input:not([readonly]), select, textarea')) as HTMLElement[]
        const currentIndex = inputs.indexOf(e.target as HTMLElement)
        if (currentIndex !== -1 && currentIndex < inputs.length - 1) {
          e.preventDefault()
          inputs[currentIndex + 1].focus()
        }
      }
    })
  }
}
