/**
 * GnAvatar - Avatar with initials, image, icon and status indicator.
 */

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

export default defineComponent({
	name: "GnAvatar",
	props: {
		src: { type: String, default: "" },
		alt: { type: String, default: "" },
		initials: { type: String, default: "" },
		icon: { type: String, default: "" },
		size: { type: String, default: "md" },
		variant: { type: String, default: "mint" },
		status: { type: String, default: "" },
		square: { type: Boolean, default: false }
	},
	setup(props, { slots }) {
		const classes = computed(() => cx("avatar", `avatar-${props.size}`, `avatar-${props.variant}`, {
			"avatar-square": props.square
		}));

		const content = computed(() => {
			if (slots.default) return slots.default();
			if (props.src) return h("img", { src: props.src, alt: props.alt });
			if (props.icon) return iconNode(props.icon);
			return props.initials?.slice(0, 2).toUpperCase();
		});

		const statusClass = () => {
			switch (props.status) {
				case "online": return "is-online";
				case "offline": return "is-offline";
				case "busy": return "is-busy";
				case "away": return "is-away";
				case "danger": return "is-danger";
				default: return "";
			}
		};

		return () => h("span", { class: classes.value }, [
			content.value,
			props.status && h("span", { class: cx("avatar-status", statusClass()) })
		]);
	}
});