import { Input } from "@medusajs/ui"
import debounce from "lodash.debounce"
import { ChangeEvent, useCallback, useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import { useSearchParams } from "react-router-dom"

type QueryProps = {
  placeholder?: string
}

export const Query = ({ placeholder }: QueryProps) => {
  const { t } = useTranslation()
  const placeholderText = placeholder || t("general.search")

  const [searchParams, setSearchParams] = useSearchParams()
  const [inputValue, setInputValue] = useState(searchParams.get("q") || "")

  const updateSearchParams = (newValue: string) => {
    if (!newValue) {
      setSearchParams((prev) => {
        prev.delete("q")
        return prev
      })

      return
    }

    setSearchParams((prev) => ({ ...prev, q: newValue || "" }))
  }

  const debouncedUpdate = useCallback(
    debounce((newValue: string) => updateSearchParams(newValue), 500),
    []
  )

  useEffect(() => {
    debouncedUpdate(inputValue)

    return () => {
      debouncedUpdate.cancel()
    }
  }, [inputValue, debouncedUpdate])

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value)
  }

  return (
    <Input
      type="search"
      size="small"
      value={inputValue}
      onChange={handleInputChange}
      placeholder={placeholderText}
    />
  )
}