import { assertExists } from '@blockeditor/global/utils';
// more than 100% due to the shadow
const leaveToPercent = `calc(100% + 10px)`;
// store active poppers
const popMap = new WeakMap();
function animateEnter(el) {
    el.style.transform = 'translateY(0)';
}
function animateLeave(el) {
    el.style.transform = `translateY(${leaveToPercent})`;
}
export function createPopper(tagName, reference, options) {
    const duration = options?.duration ?? 230;
    if (!popMap.has(reference))
        popMap.set(reference, new Map());
    const elMap = popMap.get(reference);
    assertExists(elMap);
    // if there is already a popper, cancel leave transition and apply enter transition
    if (elMap.has(tagName)) {
        const popper = elMap.get(tagName);
        assertExists(popper);
        popper.cancel?.();
        requestAnimationFrame(() => animateEnter(popper.element));
        return popper;
    }
    const menu = document.createElement(tagName);
    assertExists(reference.shadowRoot);
    reference.shadowRoot.appendChild(menu);
    // apply enter transition
    menu.style.transition = `transform ${duration}ms ease`;
    animateLeave(menu);
    requestAnimationFrame(() => animateEnter(menu));
    // TODO - calculate x and y automatically
    const x = options?.x ?? 0;
    const y = options?.y ?? 0;
    Object.assign(menu.style, {
        left: `${x}px`,
        top: `${y}px`,
    });
    const remove = () => {
        menu.remove();
        popMap.get(reference)?.delete(tagName);
    };
    const popper = {
        element: menu,
        dispose: function () {
            // apply leave transition
            animateLeave(menu);
            menu.addEventListener('transitionend', remove, { once: true });
            popper.cancel = () => menu.removeEventListener('transitionend', remove);
        },
    };
    popMap.get(reference)?.set(tagName, popper);
    return popper;
}
//# sourceMappingURL=create-popper.js.map