import type { ValidateInputBaseT } from '@bagelink/vue'
import type { WatchSource } from 'vue'
import { watchDebounced } from '@vueuse/core'

export function useValidateFieldValue(
	inputVal: WatchSource,
	getInput?: () => HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | undefined,
	validateFn?: ValidateInputBaseT['validate'],
	getFormData?: ValidateInputBaseT['getFormData'],
) {
	watchDebounced(
		inputVal,
		(newVal, oldVal) => {
			getInput?.()?.setCustomValidity('')
			if (!validateFn || newVal === oldVal || !newVal) { return }
			const isValid = validateFn(newVal, getFormData?.())
			if (typeof isValid === 'string') { getInput?.()?.setCustomValidity(isValid) }
		},
		{ debounce: 500 },
	)
}