<template>
  <UInput
    :class="ui.input({ class: props.ui?.input })"
    :leading-icon="appConfig.ui.icons.search"
    variant="subtle"
    v-bind="{
  ...forward,
  'modelValue': inputValue,
  'modelModifiers': { trim: true, ...forward.modelModifiers },
  'onUpdate:modelValue': updateInputValue
}"
  >
    <template #trailing>
      <UButton
        v-if="inputValue"
        :icon="appConfig.ui.icons.close"
        variant="link"
        size="sm"
        color="neutral"
        @click="clearInput"
      />
    </template>
  </UInput>
</template>

<script>
import theme from "#build/cms/table-search-input";
import { computed, useAppConfig } from "#imports";
import { reactiveOmit, watchDebounced } from "@vueuse/core";
import { useForwardPropsEmits } from "reka-ui";
import { ref, watch } from "vue";
import { tv } from "../tv";
</script>

<script setup>
const props = defineProps({
  class: { type: null, required: false },
  ui: { type: null, required: false },
  as: { type: null, required: false },
  id: { type: String, required: false },
  name: { type: String, required: false },
  type: { type: null, required: false },
  placeholder: { type: String, required: false },
  color: { type: null, required: false },
  variant: { type: null, required: false },
  size: { type: null, required: false },
  required: { type: Boolean, required: false },
  autocomplete: { type: null, required: false },
  autofocus: { type: Boolean, required: false },
  autofocusDelay: { type: Number, required: false },
  disabled: { type: Boolean, required: false },
  highlight: { type: Boolean, required: false },
  modelValue: { type: null, required: false },
  defaultValue: { type: null, required: false },
  modelModifiers: { type: Object, required: false },
  icon: { type: null, required: false },
  avatar: { type: Object, required: false },
  leading: { type: Boolean, required: false },
  leadingIcon: { type: null, required: false },
  trailing: { type: Boolean, required: false },
  trailingIcon: { type: null, required: false },
  loading: { type: Boolean, required: false },
  loadingIcon: { type: null, required: false }
});
const emit = defineEmits(["update:modelValue", "blur", "change"]);
const appConfig = useAppConfig();
const forward = useForwardPropsEmits(reactiveOmit(props, "modelValue"), emit);
const inputValue = ref();
function updateInputValue(value) {
  inputValue.value = value;
}
watch(() => props.modelValue, (value) => {
  if (value !== inputValue.value) {
    updateInputValue(value);
  }
}, { immediate: true });
watchDebounced(inputValue, () => search(), { debounce: 500 });
function search() {
  if (props.modelValue !== inputValue.value) {
    emit("update:modelValue", inputValue.value);
  }
}
const defaultValue = computed(() => {
  if (props.modelModifiers?.nullable) {
    return null;
  }
  if (props.modelModifiers?.optional) {
    return void 0;
  }
  return props.defaultValue;
});
function clearInput() {
  updateInputValue(defaultValue.value);
  search();
}
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.tableSearchInput || {} })());
</script>
