import { type MutableRef, useCallback, useRef } from 'preact/hooks';

export function usePopup<T extends HTMLElement>(): [hostRef: MutableRef<T|null>, triggerPopup: (text: string, className?: 'success'|'info'|'warning'|'error') => Promise<boolean>] {
	const hostRef = useRef<T|null>(null)
	const showPopup = useCallback(async (text: string, className?: 'success'|'info'|'warning'|'error'): Promise<boolean> => {
		const host = hostRef.current
		if (!host) {
			return false
		}
		if (!host.classList.contains("jsPopupHost")) {
			throw Error("host must be jsPopupHost")
		}
		const container = host.ownerDocument.createElement("div")
		container.classList.add("jsPopupContainer")
		host.appendChild(container)
		const popup = host.ownerDocument.createElement("div")
		popup.classList.add("jsPopup")
		if (className) {
			popup.classList.add(className)
		}
		popup.innerText = text
		container.appendChild(popup)
		return new Promise((resolve) => {
			const removePopup = () => {
				container.removeChild(popup)
				host.removeChild(container)
				resolve(true)
			}
			popup.addEventListener('animationend', removePopup)
			popup.addEventListener('animationcancel', removePopup)
		})
	}, [hostRef])
	return [hostRef, showPopup]
}