/**
 * `materialToolbar`: the arrow keys move focus between the controls of an `<x-toolbar>`, as
 * WAI-ARIA's toolbar pattern has them (left and right, or up and down when it is vertical; mirrored
 * on a right-to-left page; Home and End to its ends). Every control stays in the Tab order, so a
 * control added by a Livewire render is reachable without any bookkeeping.
 */
import { ringIndex } from './util.js'

const CONTROLS = 'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'

document.addEventListener('alpine:init', () => {
    window.Alpine.data('materialToolbar', (vertical = false) => ({
        move(event) {
            const controls = [...this.$root.querySelectorAll(CONTROLS)].filter((control) => control.getClientRects().length > 0)
            const at = controls.indexOf(document.activeElement)

            if (at === -1 || controls.length === 0) {
                return
            }

            const rtl = !vertical && getComputedStyle(this.$root).direction === 'rtl'
            const next = ringIndex(event.key, at, controls.length, { rtl, vertical })

            if (next !== null) {
                event.preventDefault()
                controls[next].focus()
            }
        },
    }))
})