import { defineComponent, useSlots, computed, ref, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, withKeys, withModifiers, renderSlot, createCommentVNode, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
const _hoisted_1 = ["value", "placeholder", "disabled", "maxlength", "type", "enterkeyhint", "readonly"];
const _hoisted_2 = {
  key: 1,
  class: "results tui-theme-white"
};
const _hoisted_3 = ["onClick"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "InputH5",
  props: {
    theme: { default: "white" },
    modelValue: { default: "" },
    placeholder: { default: "" },
    disabled: { type: Boolean, default: false },
    type: { default: "text" },
    readonly: { type: Boolean },
    enterkeyhint: { default: "" },
    search: {},
    select: {},
    maxlength: { default: "80" },
    border: { type: Boolean, default: true }
  },
  emits: [
    "update:modelValue",
    "input",
    "focus",
    "blur",
    "done"
  ],
  setup(__props, { emit: __emit }) {
    const slots = useSlots();
    const props = __props;
    const themeClass = computed(
      () => props.theme ? `tui-theme-${props.theme}` : ""
    );
    const emit = __emit;
    const tuiInputRef = ref(null);
    const inputRef = ref(null);
    const show = ref(false);
    const blur = (event) => {
      const { value } = event.target;
      show.value = false;
      const trimmedValue = value.trimStart().trimEnd();
      if (value !== trimmedValue) {
        event.target.value = trimmedValue;
      }
      emit("blur", tuiInputRef.value);
    };
    const done = () => {
      emit("done", tuiInputRef.value);
    };
    const focus = () => {
      show.value = true;
      emit("focus", tuiInputRef.value);
    };
    const handleSuffixIconClick = () => {
      var _a;
      (_a = inputRef.value) == null ? void 0 : _a.blur();
    };
    const closeOnOutsideClick = (event) => {
      var _a;
      if (!((_a = tuiInputRef.value) == null ? void 0 : _a.contains(event.target))) {
        show.value = false;
      }
    };
    function handleResultItemClick(item) {
      var _a;
      (_a = inputRef.value) == null ? void 0 : _a.blur();
      if (props.select) {
        props.select(item);
      }
    }
    onMounted(() => {
      window.addEventListener("click", closeOnOutsideClick);
    });
    onUnmounted(() => {
      window.removeEventListener("click", closeOnOutsideClick);
    });
    const searchResult = ref([]);
    function handleInput(event) {
      const { value } = event.target;
      const trimmedValue = value.trimStart();
      if (value !== trimmedValue) {
        event.target.value = trimmedValue;
      }
      emit("update:modelValue", trimmedValue);
      emit("input", trimmedValue);
      if (props.search) {
        searchResult.value = props.search(event.target.value);
      }
    }
    const showResults = computed(
      () => {
        var _a;
        return searchResult.value && ((_a = searchResult.value) == null ? void 0 : _a.length) !== 0 && show.value;
      }
    );
    const hasSuffixIcon = computed(() => !!slots.suffixIcon);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "tuiInputRef",
        ref: tuiInputRef,
        class: normalizeClass(["tui-input", themeClass.value, !_ctx.border && "no-border"])
      }, [
        createElementVNode("input", {
          ref_key: "inputRef",
          ref: inputRef,
          value: _ctx.modelValue,
          placeholder: _ctx.placeholder,
          disabled: _ctx.disabled,
          maxlength: props.maxlength,
          type: _ctx.type,
          enterkeyhint: _ctx.enterkeyhint,
          readonly: _ctx.readonly,
          style: normalizeStyle({ paddingRight: hasSuffixIcon.value ? "40px" : "16px" }),
          onFocus: focus,
          onBlur: blur,
          onKeyup: withKeys(done, ["enter"]),
          onInput: handleInput,
          onChange: handleInput,
          autocomplete: "off"
        }, null, 44, _hoisted_1),
        hasSuffixIcon.value ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: "suffix-icon",
          onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
          }, ["prevent"])),
          onClick: handleSuffixIconClick
        }, [
          renderSlot(_ctx.$slots, "suffixIcon", {}, void 0, true)
        ], 32)) : createCommentVNode("", true),
        showResults.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(searchResult.value, (item, index) => {
            return openBlock(), createElementBlock("div", {
              key: index,
              class: "results-item",
              onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
              }, ["prevent"])),
              onClick: ($event) => handleResultItemClick(item)
            }, [
              createTextVNode(toDisplayString(item.label || item.value) + " ", 1),
              renderSlot(_ctx.$slots, "searchResultItem", { data: item }, void 0, true)
            ], 40, _hoisted_3);
          }), 128))
        ])) : createCommentVNode("", true)
      ], 2);
    };
  }
});
export {
  _sfc_main as default
};
