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

export default defineComponent({
	name: "GnProgress",
	props: {
		value: { type: Number, required: true },
		max: { type: Number, default: 100 },
		label: { type: String, default: "" },
		variant: { type: String, default: "secondary" },
		striped: { type: Boolean, default: false },
		animated: { type: Boolean, default: false }
	},
	setup(props, { attrs, slots }) {
		return () => {
			const percent = Math.max(0, Math.min(100, Math.round((props.value / props.max) * 100)));
			const variant = normalizeVariant(props.variant, "secondary");

			return h("div", {
				...attrs,
				class: cx("progress", `progress-${variant}`, {
					"progress-striped": props.striped,
					"progress-animated": props.animated
				}, attrs.class),
				style: { "--progress-value": `${percent}%` }
			}, [
				(props.label || slots.label) && h("div", { class: "progress-header" }, [
					h("span", {}, slots.label?.() || props.label),
					h("span", { class: "progress-value" }, `${percent}%`)
				]),
				h("div", { class: "progress-track" }, [
					h("span", {
						class: "progress-bar",
						role: "progressbar",
						"aria-valuenow": props.value,
						"aria-valuemin": 0,
						"aria-valuemax": props.max
					})
				])
			]);
		};
	}
});