import searchSuggestApi from '@/core/api/searchSuggestApi'
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
import { useCallback, useEffect, useRef, useState } from 'react'
import Link from '../Link/Link'
import { useRouter } from 'next/router'

const Search = () => {
  const router = useRouter()
  const queryRef = useRef()
  const [query, setQuery] = useState('')
  const [suggestions, setSuggestions] = useState([])

  useEffect(() => {
    setQuery(router.query.q)
  }, [router.query])

  const loadSuggestion = useCallback(() => {
    if (query && document.activeElement == queryRef.current) {
      ;(async () => {
        const dataSuggestion = await searchSuggestApi({ query })
        setSuggestions(dataSuggestion.data.suggestions)
      })()
      return
    } else {
      setSuggestions([])
    }
  }, [query])

  useEffect(() => {
    if (query && document.activeElement == queryRef.current) {
      loadSuggestion()
    } else {
      setSuggestions([])
    }
  }, [loadSuggestion, query])

  const handleSubmit = (e) => {
    e.preventDefault()
    if (query) {
      router.push(`/shop/search?q=${query}`)
    } else {
      queryRef.current.focus()
    }
  }

  const onInputBlur = () => {
    setTimeout(() => {
      setSuggestions([])
    }, 100)
  }

  return (
    <>
      <form
        onSubmit={handleSubmit}
        className='flex-1 flex relative'
      >
        <input
          type='text'
          ref={queryRef}
          className='form-input p-3 rounded-r-none border-r-0 focus:border-gray_r-6'
          placeholder='Ketik nama, part number, merk'
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onBlur={onInputBlur}
          onFocus={loadSuggestion}
        />
        <button
          type='submit'
          className='rounded-r border border-l-0 border-gray_r-6 px-2'
        >
          <MagnifyingGlassIcon className='w-6' />
        </button>

        {suggestions.length > 1 && (
          <>
            <div className='absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50'>
              {suggestions.map((suggestion, index) => (
                <Link
                  href={`/shop/search?q=${suggestion.term}`}
                  key={index}
                  className='px-3 py-3 !text-gray_r-12 font-normal hover:bg-yellow_r-4'
                >
                  {suggestion.term}
                </Link>
              ))}
            </div>
          </>
        )}
      </form>
    </>
  )
}

export default Search
