const useAutocomplete = (vocabularyWordList) => {
  const state = ref('')

  const querySearch = (queryString: string, cb: any) => {
    const results = queryString
      ? vocabularyWordList.value.filter(createFilter(queryString))
      : vocabularyWordList.value
    // call callback function to return suggestions
    cb(results)
  }
  const createFilter = (queryString: string) => {
    return (vocabularyWordItem) => {
      return (
        vocabularyWordItem.value
          .toLowerCase()
          .indexOf(queryString.toLowerCase()) === 0
      )
    }
  }
  const handleSelect = (item) => {
    state.value = item.value
  }

  return {
    state,
    querySearch,
    handleSelect,
  }
}

export default useAutocomplete
