import tippy, { roundArrow } from "tippy.js";
import "tippy.js/themes/light.css";
import "tippy.js/animations/shift-away.css";
import "tippy.js/animations/shift-toward.css";
import "tippy.js/animations/scale.css";
import "tippy.js/animations/perspective.css";
import "tippy.js/dist/tippy.css";
import "tippy.js/dist/svg-arrow.css";
import "./style.scss";

function suppressClickEvent(e) {
	e.preventDefault();
}

function initTooltip() {
	tippy("[data-tippy-content]", {
		theme: "light",
		animation: "shift-away",
		arrow: roundArrow,
		role: "gtm-tooltip",
	});
}

const initPopupBlock = () => {
	const popupBlockSelector = ".wp-block-gtm-popup-box[id]";
	const popupBlocks = document.querySelectorAll(popupBlockSelector);

	popupBlocks.forEach((block) => {
		const blockId = block.getAttribute("id");
		const blockOptions = block.dataset.options
			? JSON.parse(block.dataset.options)
			: {};

		const instances = tippy(`[href="#${blockId}"]`, {
			// Overridable options, Must be the same as defaults in block.json
			maxWidth: 350,
			animation: "shift-away",
			inertia: false,
			arrow: true,

			...blockOptions,

			// Don't allow overriden
			content: block.outerHTML,
			role: "gtm-popup",
			trigger: "click",
			hideOnClick: true,
			interactive: true,
			allowHTML: true,

			onCreate(instance) {
				// Prevent default clicking behavior
				if (instance.reference.hasAttribute("href")) {
					instance.reference.addEventListener("click", suppressClickEvent);
				}
			},
			onShown(instance) {
				instance.popper.querySelector('[type="search"]').focus();
			},
		});
	});
};

if (document.readyState === "complete") {
	// Document already fully loaded
	initTooltip();
	initPopupBlock();
} else {
	// Add event listener for DOMContentLoaded (fires when document is fully loaded)
	document.addEventListener("DOMContentLoaded", initTooltip);
	document.addEventListener("DOMContentLoaded", initPopupBlock);
}