import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from 'react';
import { useLocation, useNavigate } from 'react-router';
import { TableSearch as Search } from './Search';
export function SearchWithQueryParams(props) {
    const { queryParams = 'search', onChange, ...rest } = props;
    const { search, pathname } = useLocation();
    const navigate = useNavigate();
    const params = new URLSearchParams(search);
    const initialValue = params.get(queryParams) || '';
    const [value, setValue] = useState(initialValue);
    function handleOnChange(value) {
        const { onChange } = props;
        params.set(queryParams, value);
        navigate(`${pathname}?${params.toString()}`, { replace: true });
        setValue(value);
        if (typeof onChange === 'function') {
            onChange(value);
        }
    }
    return (_jsx(Search, { onChange: handleOnChange, value: value, onReset: () => {
            handleOnChange('');
        }, ...rest }));
}
