import { onBeforeUnmount, ref, watch } from 'vue'
import { debounce } from 'lodash'

export interface UseTableSearchOptions {
  delay?: number
  initial?: string
}

export function useTableSearch(options: UseTableSearchOptions = {}) {
  const { delay = 500, initial = '' } = options

  const searchQuery = ref<string>(initial)
  const debouncedSearchQuery = ref<string>(initial)

  const updateDebouncedSearch = debounce((value: string) => {
    debouncedSearchQuery.value = value
  }, delay)

  watch(searchQuery, (value) => updateDebouncedSearch(value))

  const clearSearch = () => {
    updateDebouncedSearch.cancel()
    searchQuery.value = ''
    debouncedSearchQuery.value = ''
  }

  onBeforeUnmount(() => {
    updateDebouncedSearch.cancel()
  })

  return { searchQuery, debouncedSearchQuery, clearSearch }
}