/**
 * GnTooltip - Tooltip wrapper for any trigger element.
 */

import { defineComponent, h, ref, computed } from "vue";
import { cx } from "../utils.js";

export default defineComponent({
	name: "GnTooltip",
	props: {
		placement: { type: String, default: "top" },
		visible: { type: Boolean, default: false }
	},
	emits: ["update:visible"],
	setup(props, { slots, emit }) {
		const isVisible = ref(props.visible);

		const classes = computed(() => cx("tooltip", `tooltip-${props.placement}`, {
			"is-visible": isVisible.value
		}));

		const show = () => {
			isVisible.value = true;
			emit("update:visible", true);
		};

		const hide = () => {
			isVisible.value = false;
			emit("update:visible", false);
		};

		return () => h("span", {
			class: classes.value,
			"data-placement": props.placement
		}, [
			h("span", {
				class: "tooltip-trigger",
				onMouseenter: show,
				onMouseleave: hide,
				onFocus: show,
				onBlur: hide
			}, slots.trigger?.()),
			h("span", { class: "tooltip-content" }, slots.default?.())
		]);
	}
});