// @vitest-environment jsdom

import { beforeEach, describe, expect, it } from 'vitest'

import { focusFirst, getTabbableCandidates, getTabbableEdges } from './focus'
import { getTabbableFrom } from './tabbable'

describe('uix/lib/dom focus', () => {
	beforeEach(() => {
		document.body.innerHTML = ''
	})

	it('collects tabbable candidates in DOM order', () => {
		const container = document.createElement('div')
		const first = document.createElement('button')
		const hidden = document.createElement('input')
		const second = document.createElement('a')

		hidden.type = 'hidden'
		second.href = '#'

		container.append(first, hidden, second)
		document.body.appendChild(container)

		expect(getTabbableCandidates(container)).toEqual([first, second])
	})

	it('returns the visible tabbable edges', () => {
		const container = document.createElement('div')
		const first = document.createElement('button')
		const hidden = document.createElement('button')
		const last = document.createElement('button')

		hidden.style.display = 'none'
		container.append(first, hidden, last)
		document.body.appendChild(container)

		expect(getTabbableEdges(container)).toEqual([first, last])
	})

	it('focuses the first candidate that can receive focus', () => {
		const first = document.createElement('button')
		const second = document.createElement('button')
		document.body.append(first, second)

		expect(focusFirst([first, second])).toBe(true)
		expect(document.activeElement).toBe(first)
	})

	it('finds the next tabbable element with tabbable()', () => {
		const first = document.createElement('button')
		const second = document.createElement('button')
		const third = document.createElement('button')
		document.body.append(first, second, third)

		expect(getTabbableFrom(first, 'next')).toBe(second)
		expect(getTabbableFrom(third, 'prev')).toBe(second)
	})
})