import React, { useState } from 'react';

import { useDebounce } from '@material-hu/hooks/useDebounce';

type Props = {
  initialQuery?: string;
  debounceTime?: number;
};

const useDebounceSearchQuery = ({ initialQuery = '', debounceTime }: Props) => {
  const [query, setQuery] = useState(initialQuery);
  const debouncedQuery = useDebounce(query, debounceTime);

  const reset = () => {
    setQuery(initialQuery);
  };

  const onChange = (e: React.ChangeEvent<HTMLInputElement> | string) => {
    setQuery(typeof e === 'string' ? e : e.target.value);
  };

  return {
    query,
    debouncedQuery,
    reset,
    onChange,
  };
};

export default useDebounceSearchQuery;