"use client";

import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useCallback, useMemo } from "react";
import { parseListState, toQueryString, type ListState } from "@/lib/url-state";

/**
 * The list's filters, read from and written to the query string. `replace`
 * rather than `push`: flipping a filter should not fill the back button's
 * history with one entry per click.
 *
 * Needs a <Suspense> boundary above it - useSearchParams() in a prerendered
 * page opts the subtree into client-side rendering.
 */
export function useListState(): [ListState, (patch: Partial<ListState>) => void] {
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  const state = useMemo(() => parseListState(new URLSearchParams(searchParams.toString())), [searchParams]);

  const update = useCallback(
    (patch: Partial<ListState>) => {
      const query = toQueryString({ ...state, ...patch });
      router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
    },
    [state, router, pathname],
  );

  return [state, update];
}