import { ref } from 'vue'

export default (emit: any = null) => {
	const inputValue = ref<string>('')
	const isFocus = ref<boolean>(false)
	const onInputChangeEvt = (
		event: { target: HTMLInputElement },
		{ sourceList, originalSourceList },
	) => {
		inputValue.value = event.target.value
		if (!inputValue.value.length) {
			sourceList.value = originalSourceList.value
			return
		}
		sourceList.value = originalSourceList.value.filter(item => {
			return String(item.label).indexOf(inputValue.value) > -1
		})
	}

	const onInputFocusEvt = (
		event: { target: HTMLInputElement },
		{ sourceList, originalSourceList },
	) => {
		isFocus.value = true
		sourceList.value = originalSourceList.value
		emit && emit('focus', event)
	}

	const onInputBlurEvt = (event: { target: HTMLInputElement }) => {
		isFocus.value = false
		inputValue.value = ''
		emit && emit('blur', event)
	}

	return {
		inputValue,
		isFocus,
		onInputChangeEvt,
		onInputFocusEvt,
		onInputBlurEvt,
	}
}