(() => {
	const root = document.documentElement;
	const consentGap = 16;
	const consentRightOffset = 24;
	let frameId = null;
	let consentObserver = null;

	const isVisible = (element) => {
		if (!element) {
			return false;
		}

		const styles = window.getComputedStyle(element);

		if (
			styles.display === 'none' ||
			styles.visibility === 'hidden' ||
			Number.parseFloat(styles.opacity || '1') === 0
		) {
			return false;
		}

		const rect = element.getBoundingClientRect();

		return rect.height > 0 && rect.bottom > 0 && rect.top < window.innerHeight;
	};

	const getConsentBarState = () => {
		const consentBar = document.querySelector('.gdpr-consent-bar.bottom');

		if (!consentBar || !isVisible(consentBar)) {
			return {
				bottom: 0,
				right: 0,
			};
		}

		const buttons = consentBar.querySelector('.gdpr-consent-bar-buttons');
		const buttonsHeight = buttons && isVisible(buttons)
			? buttons.getBoundingClientRect().height
			: 0;

		return {
			bottom: Math.ceil(buttonsHeight + consentGap),
			right: consentRightOffset,
		};
	};

	const syncSalesIQOffset = () => {
		frameId = null;
		const state = getConsentBarState();
		root.style.setProperty('--ethnic-salesiq-consent-offset', `${state.bottom}px`);
		root.style.setProperty('--ethnic-salesiq-consent-right-offset', `${state.right}px`);
	};

	const queueSync = () => {
		if (frameId !== null) {
			return;
		}

		frameId = window.requestAnimationFrame(syncSalesIQOffset);
	};

	const observeConsentBar = () => {
		const consentBar = document.querySelector('.gdpr-consent-bar.bottom');

		if (!consentBar) {
			return;
		}

		if (consentObserver) {
			consentObserver.disconnect();
		}

		consentObserver = new MutationObserver(queueSync);
		consentObserver.observe(consentBar, {
			attributes: true,
			attributeFilter: ['class', 'style'],
			childList: true,
			subtree: true,
		});
	};

	const onInteraction = (event) => {
		if (
			!event.target.closest(
				'.btn-gdpr-agreement, .btn-gdpr-preferences-open, .btn-gdpr-privacy-preferences-close'
			)
		) {
			return;
		}

		window.setTimeout(queueSync, 50);
		window.setTimeout(queueSync, 350);
	};

	const bodyObserver = new MutationObserver(() => {
		observeConsentBar();
		queueSync();
	});

	if (document.body) {
		bodyObserver.observe(document.body, {
			childList: true,
			subtree: true,
		});
	}

	document.addEventListener('click', onInteraction);
	window.addEventListener('load', queueSync);
	window.addEventListener('resize', queueSync, { passive: true });

	observeConsentBar();
	queueSync();
	window.setTimeout(queueSync, 600);
	window.setTimeout(queueSync, 1800);
})();