import React, { useCallback, useRef } from 'react';

interface IProps extends React.HTMLAttributes<HTMLDivElement> {
  OnDev?: () => void;
}

const CLICK_COUNT = 5;

function DevDiv(props: IProps) {
  const { OnDev, onClick, ...otherProps } = props;
  const lastClickTime = useRef(0);
  const clickCount = useRef(0);

  const handleClick = useCallback(
    e => {
      onClick?.(e);
      if (!OnDev) {
        return;
      }

      const currentTime = Date.now();
      const timeDiff = currentTime - lastClickTime.current;

      if (timeDiff < 300) {
        clickCount.current = clickCount.current + 1;

        if (clickCount.current >= CLICK_COUNT) {
          OnDev?.();
          clickCount.current = 0;
        }
      } else {
        clickCount.current = 1;
      }

      lastClickTime.current = currentTime;
    },
    [OnDev, onClick]
  );

  return <div onClick={handleClick} {...otherProps}></div>;
}

export default DevDiv;
