/**
 * GnDataRow — compact data table/list row.
 *
 * Figma: Row - Asset List / Order list / Audience contact list.
 */

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

export default defineComponent({
	name: "GnDataRow",
	inheritAttrs: false,
	props: {
		selected: { type: Boolean, default: false },
		image: { type: String, default: "" },
		icon: { type: String, default: "" },
		columns: { type: Array, default: () => [] },
		actions: { type: Array, default: () => [] }
	},
	emits: ["select", "action"],
	setup(props, { attrs, slots, emit }) {
		return () => h("div", {
			...attrs,
			class: cx("data-row", { "data-row-selected": props.selected }, attrs.class)
		}, [
			slots.select?.() || h("label", { class: "data-row-select" }, [
				h("input", {
					type: "checkbox",
					checked: props.selected,
					onChange: event => emit("select", event.target.checked)
				})
			]),
			(props.image || props.icon || slots.media) && h("div", { class: "data-row-media" }, [
				slots.media?.(),
				props.image && !slots.media && h("img", { src: props.image, alt: "" }),
				props.icon && !props.image && !slots.media && iconNode(props.icon)
			]),
			h("div", { class: "data-row-content" },
				props.columns.map((col, index) => h("div", {
					class: cx("data-row-cell", { "data-row-cell-main": col.main })
				}, [
					col.label && h("span", { class: "data-row-label" }, col.label),
					h("span", { class: "data-row-value" }, slots[`col-${index}`]?.({ col }) || col.value)
				]))
			),
			(props.actions.length || slots.actions) && h("div", { class: "data-row-actions" }, [
				slots.actions?.(),
				props.actions.map(action => h("button", {
					class: cx("btn", "btn-icon", `btn-${action.variant || "secondary"}`, action.size ? `btn-${action.size}` : "btn-sm"),
					type: "button",
					"aria-label": action.label,
					onClick: () => emit("action", action.key || action.label)
				}, iconNode(action.icon)))
			])
		]);
	}
});