import React from "react";
import PropTypes from "prop-types";

const RELOAD_TIMEOUT = 3000;

/**
 * Reload component that triggers a page reload when the user holds down a pointer (e.g., mouse or touch) for a specified duration.
 *
 * @component
 * @param {Object} props - The component props.
 * @param {React.ReactNode} props.children - The child elements to be rendered inside the component.
 *
 * @example
 * <Reload>
 *   <button>Hold to Reload</button>
 * </Reload>
 */

export default function Reload({ children }) {
  const [timeoutID, setTimeoutID] = React.useState(null);

  const handlePointerDown = () => {
    const id = setTimeout(() => {
      window.location.reload(true);
    }, RELOAD_TIMEOUT);
    setTimeoutID(id);
  };

  const handlePointerUp = () => {
    clearTimeout(timeoutID);
  };

  return (
    <div onPointerDown={handlePointerDown} onPointerUp={handlePointerUp}>
      {children}
    </div>
  );
}

Reload.propTypes = {
  children: PropTypes.node.isRequired,
};