import { useRef } from 'react';

const useDoubleClick = (onClick, onDoubleClick, doubleClickTimeout = 300) => {
  const timeout = useRef(null);

  const handleClick = () => {
    if (timeout.current !== null) {
      onDoubleClick();
      clearTimeout(timeout.current);
      timeout.current = null;
    } else {
      timeout.current = setTimeout(()=>{
        onClick();
        clearTimeout(timeout.current);
        timeout.current = null
      }, doubleClickTimeout);
    }
  };

  return handleClick;
};

export default useDoubleClick;

/*
Usage:

import useDoubleClick from 'useDoubleClick';

const App => () => {
  const handleClick = useDoubleClick(() => console.log('click'), () => console.log('double click'), 500); // the third param is the double click timeout in ms, optional (default: 300ms)
  return (
    <div>
      <button onClick={handleClick}/>
    </div>
  );
};
*/