const tooltip = (element: HTMLElement) => {
	let div: HTMLDivElement;
	let title: string | null;
	const offset = 10;
	const above = element.getAttribute('data-tooltip-above') !== null;

	const mouseEnter = (event: MouseEvent) => {
		title = element.getAttribute('title');

		element.removeAttribute('title');

		div = document.createElement('div');
		div.textContent = title;

		div.setAttribute(
			'style',
			`position: absolute;
			top: -${event.pageX - div.offsetWidth / 2}px;
			left: -${event.pageY - div.offsetHeight - offset / 2}px;`
		);
		div.classList.add('card');
		div.classList.add('card-small');
		document.body.appendChild(div);
	};

	const mouseMove = (event: MouseEvent) => {
		if (div) {
			div.style.left = `${
				above ||
				event.pageX - div.offsetWidth / 2 > 0 ||
				event.pageX + div.offsetWidth / 2 > window.innerWidth
					? event.pageX - div.offsetWidth / 2
					: event.pageX + offset
			}px`;
			div.style.top = `${event.pageY - div.offsetHeight - offset / 2}px`;
		}
	};

	const mouseLeave = () => {
		if (div) {
			document.body.removeChild(div);
			element.setAttribute('title', title as string);
		}
	};

	element.addEventListener('mouseenter', mouseEnter);
	element.addEventListener('mouseleave', mouseLeave);
	element.addEventListener('mousemove', mouseMove);

	return {
		destroy() {
			element.removeEventListener('mouseenter', mouseEnter);
			element.removeEventListener('mouseleave', mouseLeave);
			element.removeEventListener('mousemove', mouseMove);
		}
	};
};

export default tooltip;