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

export default defineComponent({
	name: "GnTextarea",
	inheritAttrs: false,
	props: {
		modelValue: { type: String, default: "" },
		label: { type: String, default: "" },
		icon: { type: String, default: "" },
		state: { type: String, default: "" },
		help: { type: String, default: "" }
	},
	emits: ["update:modelValue"],
	setup(props, { attrs, emit }) {
		const state = normalizeInputState(props.state);

		return () => h("div", { class: cx("form-group", state && `is-${state}`) }, [
			props.label && h("label", { class: "label" }, [
				props.label,
				iconNode(props.icon),
				h("textarea", {
					...attrs,
					value: props.modelValue,
					class: cx("input", { "input-icon-left": props.icon }, attrs.class),
					onInput: event => emit("update:modelValue", eventValue(event))
				})
			]),
			!props.label && h("textarea", {
				...attrs,
				value: props.modelValue,
				class: cx("input", attrs.class),
				onInput: event => emit("update:modelValue", eventValue(event))
			}),
			props.help && h("p", { class: cx("input-help", state && `is-${state}`) }, props.help)
		]);
	}
});