import { DomNodeHelper } from "./_global--dom-node-helper.js";
import { fetchEndpoint } from "./_global--endpoint.js";
import { jsVar } from "./_global--enqueue-loader.js";
import { observeOnce } from "./_global--observer.js";
import { currentUserCanNeoTutorialHideArrow } from "./_global--permissions-capabilities.js";
import { neo__ } from "./_global--translation.js";




export function interfaceShowTutorialArrowSuppressErrorPopup20260410(domSelector) {
    if (!currentUserCanNeoTutorialHideArrow()) { return; }
    interfaceShowTutorialArrowSuppressErrorPopup20260410.suppressedSelectors ??= jsVar("neoTutorialArrowHiddenSelectors");
    if (interfaceShowTutorialArrowSuppressErrorPopup20260410.suppressedSelectors.includes(domSelector)) { return; }
    observeOnce(domSelector, async (node) => {
        const arrowNode = new DomNodeHelper(`<div class="neo-tutorial-arrow-neo-library-beta" style="position: fixed; top: 0; left: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; color: #00ff00; filter: drop-shadow(0 0 1px #000000) drop-shadow(0 0 1px #000000); font-size: 24px; font-weight: bold; z-index: 160001; pointer-events: none;"><span style="font-size: 14px;">${neo__("NEW", "NEU")}</span>↓</div>`).getNode();
        document.body.appendChild(arrowNode);
        node.addEventListener("pointerenter", async () => {
            if (interfaceShowTutorialArrowSuppressErrorPopup20260410.suppressedSelectors.includes(domSelector)) { return; }
            interfaceShowTutorialArrowSuppressErrorPopup20260410.suppressedSelectors = [...interfaceShowTutorialArrowSuppressErrorPopup20260410.suppressedSelectors, domSelector];
            fetchEndpoint("/wp-json/neo/tutorial-hide-arrow", { method: "POST", body: { "dom-selector": domSelector } });
        });
        const arrowWidth = arrowNode.offsetWidth, arrowHeight = arrowNode.offsetHeight;

        (async () => {
            while (true) {
                if (!document.body.contains(node)) { continue; }
                const rect = node.getBoundingClientRect();
                arrowNode.style.transform = `translate(${rect.left + rect.width / 2 - arrowWidth / 2}px, ${rect.top - arrowHeight}px)`;
                await new Promise(requestAnimationFrame);
            }
        })();

        while (!interfaceShowTutorialArrowSuppressErrorPopup20260410.suppressedSelectors.includes(domSelector)) { await new Promise(requestAnimationFrame); }

        await new Promise(resolve => setTimeout(resolve, 1000));
        arrowNode.style.transition = "opacity 1000ms linear";
        arrowNode.style.opacity = "0";
    });
}
