/**
 * GnLoader - Loading state indicator.
 */

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

export default defineComponent({
	name: "GnLoader",
	props: {
		type: { type: String, default: "spin" },
		size: { type: String, default: "md" },
		label: { type: String, default: "Loading" },
		block: { type: Boolean, default: false }
	},
	setup(props) {
		const sizeClass = ["sm", "md", "lg"].includes(props.size) ? `loader-${props.size}` : "loader-md";
		const typeClass = ["spin", "dots", "bar"].includes(props.type) ? `loader-${props.type}` : "loader-spin";

		return () => {
			const indicator = h("span", {
				class: cx("loader", sizeClass, typeClass),
				role: props.type === "bar" ? "progressbar" : "status",
				"aria-label": props.label
			}, [
				props.type === "spin" && h("span", { class: "loader-spin" }),
				props.type === "dots" && [1, 2, 3].map(() => h("span")),
				props.type === "bar" && h("span")
			]);

			if(props.block) {
				return h("div", { class: "loader-block" }, [
					indicator,
					h("span", props.label)
				]);
			}

			return indicator;
		};
	}
});