import { useState, useEffect, useCallback } from "react";

export default function useLongPressRestart(
  callback = () => {},
  releaseCallback = () => {},
  ms = 300
) {
  const [startLongPress, setStartLongPress] = useState(false);
  const [isInit, setIsInit] = useState(false);
  const [isTriggered, setIsTriggered] = useState(false);

  useEffect(() => {
    let timerId;
    let initTimerId;
    if (startLongPress) {
      if (isInit) {
        timerId = setTimeout(() => {
          callback();
          setIsTriggered(true);
        }, ms);
        initTimerId = setTimeout(() => {
          setIsInit(false);
        }, ms);
      }
    } else {
      clearTimeout(timerId);
      clearTimeout(initTimerId);
    }

    return () => {
      clearTimeout(timerId);
      clearTimeout(initTimerId);
    };
  }, [callback, ms, startLongPress, isInit]);

  const onStartCallback = useCallback(() => {
    setIsInit(true);
    setStartLongPress(true);
  }, []);

  const onEndCallback = useCallback(() => {
    setIsInit(false);
    setStartLongPress(false);
    if (isTriggered) {
      releaseCallback();
      setIsTriggered(false);
    }
  }, [isTriggered, releaseCallback]);

  return {
    events: {
      onMouseDown: onStartCallback,
      onTouchStart: onStartCallback,
      onMouseUp: onEndCallback,
      onMouseLeave: onEndCallback,
      onTouchEnd: onEndCallback,
    },
  };
}