/* eslint-disable import/prefer-default-export */

import { useState } from 'react'
import Fuse from 'fuse.js'
import { useDebounce } from './useDebounce'

type LIST = {
  [key: string | number]: string | number
}

interface UseClientSearchProps {
  keys: string[]
  list: LIST[]
  options?: Fuse.IFuseOptions<LIST>
}

export const useClientSearch = (props: UseClientSearchProps) => {
  const { keys, list, options } = props
  const [query, setQuery] = useState<string>('')
  const debouncedValue = useDebounce<string>(query, 500)

  const fuse = new Fuse(list, {
    keys,
    threshold: 0.3,
    useExtendedSearch: true,
    ...options,
  })

  const results = fuse.search(debouncedValue)

  return {
    query,
    setQuery,
    loading: Boolean(results.length === 0 && !debouncedValue && query),
    results: query ? results.map((fuseItem) => fuseItem.item) : list,
  }
}