import { onMounted, onUnmounted, ref } from 'vue'

/**
 * Utility function to enhance table accessibility
 */
export function useTableAccessibility({
	tableId,
}: {
	tableId: string
}) {
	// Référence pour stocker et nettoyer les timeouts
	const accessibilityTimeouts = ref<ReturnType<typeof setTimeout>[]>([])
	function setupAccessibility() {
		onMounted(() => {
			// Un <caption> vide a besoin d'un nom accessible, mais `aria-label`
			// est prohibé sur <caption> : on nomme la table via son élément
			// <table> (autorisé pour role="table").
			const captionElement = document.querySelector(`#${tableId} caption`)
			if (captionElement && captionElement.textContent?.trim() === '') {
				const tableElement = document.querySelector(`#${tableId} table`)
				if (tableElement && !tableElement.hasAttribute('aria-label')) {
					tableElement.setAttribute('aria-label', 'Table caption')
				}
			}

			const inputs = document.querySelectorAll(`#${tableId} input`)
			inputs.forEach((input) => {
				(input as HTMLElement).removeAttribute('aria-describedby')
			})

			const fields = document.querySelectorAll(`#${tableId} .v-field`)
			fields.forEach((field) => {
				const element = field as HTMLElement
				element.setAttribute('tabindex', '0')

				// Remove immediately if it exists
				if (element.hasAttribute('aria-controls')) {
					element.removeAttribute('aria-controls')
				}

				// Check again after a delay
				const timeoutId = setTimeout(() => {
					if (element.hasAttribute('aria-controls')) {
						element.removeAttribute('aria-controls')
					}
				}, 500)
				accessibilityTimeouts.value.push(timeoutId)
			})

			const fieldLabels = document.querySelectorAll(`#${tableId} .v-field`)
			fieldLabels.forEach((fieldLabel) => {
				(fieldLabel as HTMLElement).setAttribute('aria-label', 'items per page')
			})

			const fieldTitles = document.querySelectorAll(`#${tableId} .v-field`)
			fieldTitles.forEach((fieldTitle) => {
				(fieldTitle as HTMLElement).setAttribute('title', 'items per page')
			})

			const th = document.querySelectorAll(`#${tableId} th`)
			for (const el of th) {
				el.setAttribute('scope', 'col')
			}
		})

		// Nettoyer tous les timeouts lors du démontage du composant
		onUnmounted(() => {
			accessibilityTimeouts.value.forEach((timeoutId) => {
				clearTimeout(timeoutId)
			})
			accessibilityTimeouts.value = []
		})
	}

	return {
		setupAccessibility,
	}
}