import { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { buildSearchUrl, queryFromParams, readArtikelQuery } from './artikelQuery';

export default function withSearchParams(Wrapped) {
  function SearchParamsWrapper(props) {
    const [searchParams, setSearchParams] = useSearchParams();
    const navigate = useNavigate();

    useEffect(() => {
      const query = queryFromParams(searchParams);
      if (query.target.trim().length >= 3) return;

      const stored = readArtikelQuery();
      if (!stored?.target || stored.target.trim().length < 3) return;

      navigate(
        buildSearchUrl(stored.target, stored.filter ?? '', stored.offset ?? 0),
        { replace: true },
      );
    }, [searchParams, navigate]);

    return (
      <Wrapped
        {...props}
        searchParams={searchParams}
        setSearchParams={setSearchParams}
        navigate={navigate}
      />
    );
  }
  return SearchParamsWrapper;
}