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

let drawerId = 0;

export default defineComponent({
	name: "GnDrawer",
	props: {
		open: { type: Boolean, default: false },
		title: { type: String, default: "" },
		position: { type: String, default: "right" }
	},
	emits: ["update:open", "close"],
	setup(props, { emit, slots }) {
		const titleId = `gn-drawer-title-${++drawerId}`;
		const close = () => {
			emit("update:open", false);
			emit("close");
		};

		return () => props.open ? h(Teleport, { to: "body" }, [
			h("div", {
				class: cx("drawer a-show", { "drawer-left": props.position === "left" }),
				"aria-hidden": "false"
			}, [
				h("div", { class: "drawer-backdrop", onClick: close }),
				h("aside", {
					class: "drawer-panel",
					role: "dialog",
					"aria-modal": "true",
					"aria-labelledby": titleId
				}, [
					h("header", { class: "drawer-header" }, [
						h("h4", { class: "drawer-title", id: titleId }, slots.title?.() || props.title),
						h("button", {
							class: "btn-icon drawer-close",
							type: "button",
							"aria-label": "Close",
							onClick: close
						}, [iconNode("ph-x")])
					]),
					h("div", { class: "drawer-body" }, slots.default?.()),
					slots.footer && h("footer", { class: "drawer-footer" }, slots.footer({ close }))
				])
			])
		]) : null;
	}
});