import debounce from 'lodash.debounce';
import { ChangeEvent, useState } from 'react';

/**
 * This hook allows you to handle state for inputs
 * @param {number} delay - delay for debounce
 * @param {string} initialValue - default value
 */
const useDebouncedInput = (delay: number, initialValue?: string) => {
    const [value, setValue] = useState(initialValue || '');

    const handleChange = debounce((event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        setValue(event.target.value);
    }, delay);

    return [value, handleChange, setValue] as const;
};

export default useDebouncedInput;
