function handleQuoteHover(reply, parentCid, onElementOutOfView) {
	const cid = parentCid ? parentCid : reply.shortCid;
	const isMobile = window.innerWidth <= 480;
	const postNumberSelector = isMobile ? '.post-number-mobile' : '.post-number-desktop';

	const targetElementSelector = isMobile ? '.post-reply-mobile, .op-mobile' : '.post-reply-desktop, .op-desktop';

	const targetElement = [...document.querySelectorAll(targetElementSelector)].find((el) => {
		const postNumberElement = el.querySelector(postNumberSelector);
		return postNumberElement && postNumberElement.innerHTML.includes(cid);
	});

	if (targetElement) {
		const isInViewport = (element) => {
			const bounding = element.getBoundingClientRect();
			return (
				bounding.top >= 0 &&
				bounding.left >= 0 &&
				bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
				bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
			);
		};

		if (isInViewport(targetElement)) {
			const highlightedElements = document.querySelectorAll('.highlighted');

			highlightedElements.forEach((el) => {
				el.classList.remove('highlighted');
			});

			if (!targetElement.classList.contains('op-mobile') && !targetElement.classList.contains('op-desktop')) {
				targetElement.classList.add('highlighted');
			}
		} else {
			onElementOutOfView();
		}
	} else {
		onElementOutOfView();
	}
}

export default handleQuoteHover;
