import { useState } from 'react';

const TouchComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  // Timer reference
  let timer = null;

  const handleTouchStart = () => {
    // Start a timer when the touch starts
    timer = setTimeout(() => {
      // Set isOpen to true after 2 seconds
      setIsOpen(true);
      console.log('Finger held for 2 seconds, isOpen:', isOpen);
    }, 2000); // 2 seconds
  };

  const handleTouchEnd = () => {
    // Clear the timer if the touch ends before 2 seconds
    clearTimeout(timer);
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      style={{ width: '100vw', height: '100vh', backgroundColor: isOpen ? 'lightgreen' : 'lightgrey' }}
    >
      <p>Touch and hold the screen for 2 seconds</p>
      <p>{`isOpen: ${isOpen}`}</p>
    </div>
  );
};

export default TouchComponent;

useEffect(() => {
  return () => {
    if (timer) {
      clearTimeout(timer);
    }
  };
}, []);