/**
 * GnFolderCard — folder card with icon, title, menu and summary.
 *
 * Figma: Card - Folder / Card - Folder Option.
 */

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

export default defineComponent({
	name: "GnFolderCard",
	inheritAttrs: false,
	props: {
		title: { type: String, required: true },
		image: { type: String, default: "" },
		icon: { type: String, default: "ph-folder" },
		layout: { type: String, default: "vertical" }, // vertical | horizontal
		selected: { type: Boolean, default: false },
		summary: { type: Array, default: () => [] }
	},
	emits: ["select", "update:selected", "menu"],
	setup(props, { attrs, slots, emit }) {
		return () => {
			const tag = props.selected !== undefined && !attrs.href ? "button" : "article";

			return h(tag, {
				...attrs,
				class: cx(
					"folder-card",
					{ "folder-card--horizontal": props.layout === "horizontal" },
					{ "is-selected": props.selected },
					attrs.class
				),
				type: tag === "button" ? "button" : undefined,
				onClick: () => {
					emit("update:selected", !props.selected);
					emit("select");
				}
			}, [
				h("button", {
					class: "folder-card__menu",
					type: "button",
					"aria-label": "More options",
					onClick: event => {
						event.stopPropagation();
						emit("menu");
					}
				}, slots.menu?.() || iconNode("ph-dots-three-vertical")),
				h("div", { class: "folder-card__main" }, [
					h("span", { class: "folder-card__icon" }, [
						slots.icon?.() || (props.image
							? h("img", { src: props.image, alt: "" })
							: iconNode(props.icon))
					]),
					h("h3", { class: "folder-card__title" }, slots.title?.() || props.title)
				]),
				(props.summary.length || slots.summary) && h("div", { class: "folder-card__summary" }, [
					slots.summary?.(),
					props.summary.map((item, index) => h("div", {
						key: index,
						class: cx("folder-card__summary-item", { "folder-card__summary-item--full": item.full })
					}, [
						h("span", { class: "folder-card__summary-label" }, item.label),
						h("span", { class: "folder-card__summary-value" }, item.value)
					]))
				])
			]);
		};
	}
});