import tippy from "tippy.js";
import type { Action } from "svelte/action";
import type { ComponentType, SvelteComponent } from "svelte";

export const popup: Action<HTMLButtonElement, ComponentType> = (
  node,
  Component,
) => {
  let component: SvelteComponent | undefined;
  let target: HTMLElement | undefined;
  const edit = tippy(node, {
    interactive: true,
    trigger: "click",
    onShow(instance) {
      target = instance.popper.querySelector(".tippy-content") as HTMLElement;
      target.classList.add("active");
      component ??= new Component({ target });
    },
    onHidden() {
      component?.$destroy();
      target?.classList.remove("active");
      component = undefined;
    },
  });

  return {
    destroy() {
      edit.destroy();
    },
  };
};