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 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">
            {suggestions.map((suggestion, index) => (
              <Link href={`/shop/search?q=${suggestion.term}`} key={index} className="px-3 py-3 !text-gray_r-12 font-normal">
                {suggestion.term}
              </Link>
            ))}
          </div>
        </>
      ) }
    </form>
  )
}

export default Search