import { ref } from 'vue'

export default () => {
	const panelState = ref<boolean>(false)

	const togglePanelState = (inputEl = null) => {
		panelState.value = !panelState.value
		if (inputEl && panelState.value) {
			inputEl?.value?.focus()
		}
	}

	const openPanel = () => {
		panelState.value = true
	}

	const closePanel = () => {
		panelState.value = false
	}

	const panelCloseListenerFn = (e, containerEl) => {
		const closeTagIconClass =
			'es-select-input__seleced-value-list__value__icon'
		if (
			!containerEl?.value?.contains(e.target as Node) &&
			!e.target.classList.contains(closeTagIconClass)
		) {
			closePanel()
		}
	}

	const closePanelOnClickBody = containerEl => {
		const fn = event => {
			panelCloseListenerFn(event, containerEl)
		}
		document.addEventListener('click', fn)
		return () => {
			document.removeEventListener('click', fn)
		}
	}

	return {
		panelState,
		togglePanelState,
		openPanel,
		closePanel,
		closePanelOnClickBody,
	}
}