Untitled

// import React,{ useState, useEffect ,useContext,useCallback} from "react";
// import { useTimer } from "react-timer-hook";
// // import { Text } from "../../../../../styled";
// // import { ExamContextConsumer } from "../../context";

// export default function MyTimer({ expiryTimestamp, onExpire, onTimeChange }) {

//   //console.log("Expiry Time : ",expiryTimestamp)
//   const {
//     seconds,
//     minutes,
//     hours,
//     isRunning,
//   } = useTimer({ expiryTimestamp, onExpire });

//   // Call the onTimeChange callback every time the timer updates
//   useEffect(() => {
//     if(onTimeChange){
//     onTimeChange({ hours, minutes, seconds, isRunning });
//    }
//   }, [hours, minutes, seconds, isRunning, onTimeChange]);

//   return (
//     <>
//      <div>
//       <div className="pkm">{hours}:{minutes}:{seconds}</div>
//     </div>
   

//     </>
   
    
//   );
// }



// import React, { useEffect } from "react";
// import { useTimer } from "react-timer-hook";

// export default function MyTimer({ expiryTimestamp, onExpire, onTimeChange }) {
//   const { seconds, minutes, hours, isRunning } = useTimer({
//     expiryTimestamp,
//     onExpire,
//   });

//   // Ensure that onTimeChange is called whenever the timer updates
//   useEffect(() => {
//     if (onTimeChange) {
//       onTimeChange({ hours, minutes, seconds, isRunning });
//     }
//   }, [hours, minutes, seconds, isRunning, onTimeChange]);

//   // Helper to format time
//   const formatTime = (time) => String(time).padStart(2, "0");

//   return (
//     <div>
//       <div className="pkm">
//         {formatTime(hours)}:{formatTime(minutes)}:{formatTime(seconds)}
//       </div>
//     </div>
//   );
// }





import React, { useEffect, useState } from "react";
import { useTimer } from "react-timer-hook";

export default function MyTimer({ expiryTimestamp, onExpire, onTimeChange }) {
  const { seconds, minutes, hours, isRunning, restart } = useTimer({
    expiryTimestamp,
    onExpire: () => {
      setTimeOver(true); // Mark timer as over
      if (onExpire) onExpire(); // Call the onExpire callback
    },
  });

  const [timeOver, setTimeOver] = useState(false);

  // Ensure that onTimeChange is called whenever the timer updates
  useEffect(() => {
    if (!timeOver && onTimeChange) {
      onTimeChange({ hours, minutes, seconds, isRunning });
    }
  }, [hours, minutes, seconds, isRunning, timeOver, onTimeChange]);

  // Helper to format time
  const formatTime = (time) => String(time).padStart(2, "0");

  return (
    <div>
      {timeOver ? (
        <div className="" style={{color:"red"}}>Time Over</div>
      ) : (
        <div className="pkm">
          {formatTime(hours)}:{formatTime(minutes)}:{formatTime(seconds)}
        </div>
      )}
    </div>
  );
}