import { defineComponent, h } from "vue";
import { cx, iconNode, normalizeVariant } from "../utils.js";

export default defineComponent({
	name: "GnChip",
	props: {
		variant: { type: String, default: "" },
		icon: { type: String, default: "" },
		selected: { type: Boolean, default: false },
		disabled: { type: Boolean, default: false },
		removable: { type: Boolean, default: false }
	},
	emits: ["remove"],
	setup(props, { attrs, emit, slots }) {
		return () => {
			const tag = attrs.onClick ? "button" : "span";
			const variant = props.variant ? normalizeVariant(props.variant) : "";

			return h(tag, {
				...attrs,
				type: tag === "button" ? "button" : undefined,
				disabled: tag === "button" ? props.disabled : undefined,
				"aria-pressed": tag === "button" ? String(props.selected) : undefined,
				class: cx("chip", variant && `chip-${variant}`, {
					"chip-selected": props.selected,
					"chip-disabled": props.disabled
				}, attrs.class)
			}, [
				iconNode(props.icon),
				slots.default?.(),
				props.removable && h("button", {
					class: "chip-remove",
					type: "button",
					"aria-label": "Remove",
					onClick: event => {
						event.stopPropagation();
						emit("remove");
					}
				}, [iconNode("ph-x")])
			]);
		};
	}
});