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

export default defineComponent({
	name: "GnSearchField",
	inheritAttrs: false,
	props: {
		modelValue: { type: String, default: "" },
		placeholder: { type: String, default: "Search" },
		compact: { type: Boolean, default: true },
		clearable: { type: Boolean, default: true }
	},
	emits: ["update:modelValue", "clear"],
	setup(props, { attrs, emit }) {
		const clear = () => {
			emit("update:modelValue", "");
			emit("clear");
		};

		return () => h("div", {
			class: cx("input-group search-field", { "input-group-compact": props.compact })
		}, [
			h("span", { class: "input-group-addon" }, [iconNode("ph-magnifying-glass")]),
			h("input", {
				...attrs,
				type: "search",
				value: props.modelValue,
				placeholder: props.placeholder,
				class: cx("input-group-input", attrs.class),
				onInput: event => emit("update:modelValue", eventValue(event))
			}),
			props.clearable && h("button", {
				class: "input-group-action",
				type: "button",
				"aria-label": "Clear search",
				onClick: clear
			}, [iconNode("ph-x")])
		]);
	}
});