/**
 * GnChatInput — rich chat input bar.
 *
 * Figma: Input Container Chat / Input Container Messenger.
 */

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

export default defineComponent({
	name: "GnChatInput",
	inheritAttrs: false,
	props: {
		modelValue: { type: String, default: "" },
		placeholder: { type: String, default: "Type a message…" },
		variant: { type: String, default: "chat" }, // chat | messenger
		actions: { type: Array, default: () => [] },
		sendIcon: { type: String, default: "ph-paper-plane-right" },
		disabled: { type: Boolean, default: false }
	},
	emits: ["update:modelValue", "send", "action"],
	setup(props, { attrs, slots, emit }) {
		return () => h("div", {
			...attrs,
			class: cx("chat-input", { "chat-input--messenger": props.variant === "messenger" }, attrs.class)
		}, [
			slots.prefix?.(),
			h("textarea", {
				class: "chat-input__field",
				rows: 1,
				placeholder: props.placeholder,
				value: props.modelValue,
				disabled: props.disabled,
				onInput: event => emit("update:modelValue", event.target.value),
				onKeydown: event => {
					if (event.key === "Enter" && !event.shiftKey) {
						event.preventDefault();
						emit("send", props.modelValue);
					}
				}
			}),
			h("div", { class: "chat-input__actions" }, [
				slots.actions?.(),
				props.actions.map(action => h("button", {
					class: cx("chat-input__action", { [`chat-input__action--${action.type || "secondary"}`]: true }),
					type: "button",
					"aria-label": action.label,
					disabled: props.disabled,
					onClick: () => emit("action", action)
				}, action.icon && iconNode(action.icon))),
				h("button", {
					class: cx("chat-input__action", "chat-input__action--send"),
					type: "button",
					"aria-label": "Send",
					disabled: props.disabled,
					onClick: () => emit("send", props.modelValue)
				}, slots.send?.() || iconNode(props.sendIcon))
			])
		]);
	}
});