import { cn } from '@/lib/utils'
import { SearchIcon, X } from 'lucide-react'
import { ComponentProps, forwardRef, useEffect, useState } from 'react'

const SearchInput = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
  ({ value, onChange, className, ...props }, ref) => {
    const [displayClear, setDisplayClear] = useState(false)
    const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null)

    useEffect(() => {
      setDisplayClear(!!value)
    }, [value])

    function setRefs(el: HTMLInputElement) {
      setInputRef(el)
      if (typeof ref === 'function') {
        ref(el)
      } else if (ref) {
        ;(ref as React.MutableRefObject<HTMLInputElement | null>).current = el
      }
    }

    return (
      <div
        tabIndex={0}
        className={cn(
          'flex h-9 w-full items-center rounded-xl border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-all duration-200 md:text-sm [&:has(:focus-visible)]:ring-ring [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:outline-none hover:border-ring/50',
          className
        )}
      >
        <SearchIcon className="size-4 shrink-0 opacity-50" onClick={() => inputRef?.focus()} />
        <input
          {...props}
          name="search-input"
          ref={setRefs}
          value={value}
          onChange={onChange}
          className="size-full mx-2 border-none bg-transparent focus:outline-none placeholder:text-muted-foreground"
        />
        {displayClear && (
          <button
            type="button"
            className="rounded-full bg-foreground/40 hover:bg-foreground transition-opacity size-5 shrink-0 flex flex-col items-center justify-center"
            onMouseDown={(e) => e.preventDefault()}
            onClick={() => onChange?.({ target: { value: '' } } as any)}
          >
            <X className="!size-3 shrink-0 text-background" strokeWidth={4} />
          </button>
        )}
      </div>
    )
  }
)
SearchInput.displayName = 'SearchInput'
export default SearchInput