import { DirectiveBinding, ObjectDirective } from "vue";
import { createPopper } from "@popperjs/core";
import { createApp } from "vue";
import Tooltip from "./Tooltip.vue";

const VTooltip: ObjectDirective = {
    mounted(el: HTMLElement, binding: DirectiveBinding<any>) {
        const tooltip = document.createElement("div");
        tooltip.classList.add("tooltip");
        tooltip.style.position = "absolute";
        el.appendChild(tooltip);

        const tooltipText = binding.value?.text ?? binding.value;
        createApp(Tooltip, { text: tooltipText, shortcut: binding.value?.shortcut }).mount(tooltip);
        tooltip.style.display = "none";

        createPopper(el, tooltip, {
            placement: "top",
        });

        el.addEventListener("mouseenter", () => {
            tooltip.style.display = "block";
        });

        el.addEventListener("mouseleave", () => {
            tooltip.style.display = "none";
        });
    },

    unmounted(el: HTMLElement) {
        const tooltip = el.querySelector(".tooltip");
        if (tooltip) {
            el.removeChild(tooltip);
        }
    },
};

export default VTooltip;