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

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

    useEffect(() => {
      const currentTarget = searchParams.get('target');
      if (currentTarget != null && currentTarget.trim().length > 0) return;

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

      navigate(
        buildSearchUrl(stored.target, stored.filter ?? '', stored.offset ?? 0),
        { replace: true },
      );
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

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