/**
 * GnTab - Individual tab button. Must be used inside GnTabs.
 */

import { defineComponent, h, inject, onMounted } from "vue";
import { cx, iconNode } from "../utils.js";
import { tabsKey } from "./GnTabs.js";

export default defineComponent({
	name: "GnTab",
	props: {
		name: { type: [String, Number], required: true },
		label: { type: String, default: "" },
		icon: { type: String, default: "" },
		disabled: { type: Boolean, default: false }
	},
	setup(props, { slots }) {
		const tabs = inject(tabsKey, null);

		onMounted(() => {
			tabs?.registerTab(props.name, props.label);
		});

		return () => {
			if (!tabs) return null;
			const active = tabs.isActive(props.name);

			return h("button", {
				class: cx("tab", { "tab-active": active }),
				type: "button",
				role: "tab",
				"aria-selected": active ? "true" : "false",
				tabindex: active ? "0" : "-1",
				disabled: props.disabled,
				onClick: () => tabs.select(props.name)
			}, [
				props.icon && iconNode(props.icon),
				slots.default?.() || props.label
			]);
		};
	}
});