'use client'

import { cn } from '@/utilities/cn'
import { createUrl } from '@/utilities/createUrl'
import { updateShopSearchParams } from '@/utilities/shopParams'
import { SearchIcon } from 'lucide-react'
import { useRouter, useSearchParams } from 'next/navigation'
import { useId } from 'react'

type Props = {
  className?: string
  label?: string | null
  placeholder?: string | null
}

export const Search: React.FC<Props> = ({ className, label, placeholder }) => {
  const inputID = useId()
  const router = useRouter()
  const searchParams = useSearchParams()

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()

    const val = e.target as HTMLFormElement
    const search = val.search as HTMLInputElement
    const newParams = updateShopSearchParams(searchParams, {
      type: 'search',
      value: search.value,
    })

    router.push(createUrl('/shop', newParams))
  }

  return (
    <form className={cn('w-full', className)} onSubmit={onSubmit}>
      {label ? (
        <label
          className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-[#607668]"
          htmlFor={inputID}
        >
          {label}
        </label>
      ) : null}
      <div className="relative">
        <button
          aria-label="Cari produk"
          className="absolute left-3 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-full text-[#607668] transition hover:bg-[#edf5e8] hover:text-[#063f2b]"
          type="submit"
        >
          <SearchIcon className="h-4 w-4" />
        </button>
        <input
          autoComplete="off"
          className="w-full rounded-lg border border-[#dbe8d7] bg-[#f7faf4] py-3 pl-11 pr-4 text-[13px] text-[#063f2b] outline-none transition placeholder:text-[#8a9a8e] focus:border-[#003b29] focus:bg-white focus:ring-4 focus:ring-[#003b29]/10"
          defaultValue={searchParams?.get('q') || ''}
          id={inputID}
          key={searchParams?.get('q')}
          name="search"
          placeholder={placeholder || 'Search for products...'}
          type="text"
        />
      </div>
    </form>
  )
}