import { useState, useEffect, useRef } from 'react';

function useDebounced({
	value = null,
	onChange = () => {},
	debounceTime = 500
}) {
	const timeoutIdRef = useRef(null);
	const [innerValue, setInnerValue] = useState(value);

	useEffect(() => {
		setInnerValue(value);
	}, [value]);

	const handleChange = e => {
		if (value !== null) {
			setInnerValue(e.target.value);
		}

		clearTimeout(timeoutIdRef.current);
		timeoutIdRef.current = setTimeout(() => {
			onChange(e);
		}, debounceTime);
	};

	const debouncedValue = timeoutIdRef.current ? innerValue : value;

	return [debouncedValue, handleChange];
}

export default useDebounced;