<template>
  <v-text-field
    ref="search-input"
    v-model="workingString"
    clearable
    :autofocus="autoFocus"
    density="compact"
    :label="label || $t('core.search_input')"
    prepend-inner-icon="mdi-magnify"
    flat
    hide-details
    single-line
  />
</template>

<script setup lang="ts">
import { useTemplateRef, onMounted, computed } from "vue"
import { awaitTime } from "@racletteCore/lib/dataHelper"
import { debounceHelper } from "@raclettejs/core/frontend"
const debounce = debounceHelper()

const props = withDefaults(
  defineProps<{
    autoFocus?: boolean
    label?: string
  }>(),
  {
    autoFocus: false,
  },
)

const model = defineModel({
  type: String,
  required: true,
})
const workingString = computed({
  get() {
    return model.value
  },
  set(newVal) {
    debounce(() => {
      model.value = newVal
    })
  },
})
const input = useTemplateRef("search-input")

onMounted(async () => {
  if (props.autoFocus) {
    await awaitTime(300)
    input?.value?.focus()
  }
})
</script>
