/**
 * GnDropdown - Dropdown menu wrapper.
 */

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

export const dropdownKey = Symbol("vmk-ui-kit-dropdown");

export default defineComponent({
	name: "GnDropdown",
	props: {
		placement: { type: String, default: "left" },
		open: { type: Boolean, default: false }
	},
	emits: ["update:open"],
	setup(props, { slots, emit }) {
		const isOpen = ref(props.open);

		const toggle = () => {
			isOpen.value = !isOpen.value;
			emit("update:open", isOpen.value);
		};

		const close = () => {
			isOpen.value = false;
			emit("update:open", false);
		};

		provide(dropdownKey, { isOpen, close });

		return () => h("div", { class: "dropdown" }, [
			h("button", {
				type: "button",
				"data-dropdown-trigger": "",
				onClick: toggle
			}, slots.trigger?.()),
			h("div", {
				class: cx("dropdown-menu", { "is-open": isOpen.value }),
				"data-placement": props.placement
			}, slots.default?.())
		]);
	}
});