/**
 * GnDropdownItem - Dropdown menu item.
 */

import { defineComponent, h, computed, inject } from "vue";
import { cx, iconNode } from "../utils.js";
import { dropdownKey } from "./GnDropdown.js";

export default defineComponent({
	name: "GnDropdownItem",
	props: {
		icon: { type: String, default: "" },
		active: { type: Boolean, default: false },
		disabled: { type: Boolean, default: false }
	},
	emits: ["click"],
	setup(props, { slots, emit }) {
		const dropdown = inject(dropdownKey, null);

		const classes = computed(() => cx("dropdown-item", {
			"is-active": props.active,
			"is-disabled": props.disabled
		}));

		return () => h("button", {
			type: "button",
			class: classes.value,
			disabled: props.disabled,
			onClick: () => {
				if (props.disabled) return;
				dropdown?.close?.();
				emit("click");
			}
		}, [
			props.icon && h("span", { class: "dropdown-item-icon" }, [iconNode(props.icon)]),
			h("span", { class: "dropdown-item-content" }, slots.default?.())
		]);
	}
});