import { useState, useRef } from "react";

export default function Stopwatch() {
  const [startTime, setStartTime] = useState(null);
  const [now, setNow] = useState(null);
  const intervalRef = useRef(null);
  console.log("나 실행됐어 1");
  // 2. handleStart 함수가 실행됨
  function handleStart() {
    // 3. startTime라는 상태를 현재 시각으로 업데이트
    setStartTime(Date.now());
    // 4. now라는 상태를 현재 시각으로 업데이트
    setNow(Date.now());
    // 5. cleaerInterval을 사용하여 실행되는 인터벌을 중지, 단 초기값이 null이기에 첫 클릭에서는 무시됨
    clearInterval(intervalRef.current);
    // 6. 0.01초마다 now를 현재 시간으로 업데이트하는 새로운 인터벌을 설정함
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  }

  // 12. handleStop 함수가 실행됨
  function handleStop() {
    // 13. 실행 중인 인터벌을 clearInterval을 사용하여 중지함
    clearInterval(intervalRef.current);
  }

  // 7. secondsPassed 변수는 경과한 시간을 나타내는 변수
  let secondsPassed = 0;
  console.log(secondsPassed);
  console.log("나 실행됐어 2");
  // 8. startTime과 now가 존재할 경우에만 값을 계산함
  if (startTime != null && now != null) {
    // 9. 계산은 '(now-startTIme)/1000'로 구성되며, 밀리초 단위인 시간을 초 단위로 변환함
    secondsPassed = (now - startTime) / 1000;
  }
  console.log(secondsPassed);
  console.log("나 실행됐어 3");
  return (
    <>
      {/* 10. 계산 결과를 소수점 세 자리까지 보여줌 */}
      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
      {/* 1.Start 버튼을 클릭함 */}
      <button onClick={handleStart}>Start</button>
      {/* 11. Stop 버튼을 클릭함 */}
      <button onClick={handleStop}>Stop</button>
    </>
  );
}