'use client';

import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import Image from "next/image";
import { useDebouncedCallback } from 'use-debounce';
import { shallowEqualObjects } from 'react-query/types/core/utils';

export default function Search({ placeholder }: { placeholder: string }) {
  const searchParams = useSearchParams();
  const { replace } = useRouter();
  const pathname = usePathname();
  const router = useRouter()

  const handleSearch = useDebouncedCallback((term: string) => {
    const params = new URLSearchParams(searchParams??"");

    if (term) {
      params.set('query', term);
      params.delete('page');
    } else {
      params.delete('query');
    }
    window.history.pushState({},"",`${pathname}?${params.toString()}`);
  }, 600);


  return (
    <div className="">
      <label htmlFor="search" className="bwLabel">
        Search
      </label>
      <input
        className=""
        placeholder={placeholder}
        onChange={(e) => {
          handleSearch(e.target.value);
        }}
        defaultValue={searchParams?.get('query')?.toString()}
      />
      <Image className={""} src={"/searchIcon.svg"} width={24} height={24} alt='search icon'></Image>
    </div>
  );
}

    replace(`${pathname}?${params.toString()}`);