import { Box, Modal } from '@chakra-ui/react';
const timeout = 1000 * 60 * 13;
const promptTimeout = 1000 * 60 * 2;
const IdleTimer: FC = () => {
 const { push } = useRouter();
 const { isAuthenticated } = useAuth();
 const [open, setOpen] = useState<boolean>(false);
 const [remaining, setRemaining] = useState<number>(0);
 const onPrompt = useCallback(() => {
 setOpen(true);
 setRemaining(promptTimeout);
 }, []);
 const onIdle = useCallback(() => {
 setOpen(false);
 setRemaining(0);
 push('/auth/signout');
 }, []);
 const { getRemainingTime, isPrompted, activate, pause } = useIdleTimer({
 timeout,
 promptTimeout,
 onPrompt,
 onIdle,
 startManually: !isAuthenticated,
 });
 const handleStillHere = useCallback(() => {
 setOpen(false);
 activate();
 }, []);
 const handleLogout = useCallback(() => {
 setOpen(false);
 setRemaining(0);
 push('/auth/signout');
 }, []);
 useEffect(() => {
 const interval = setInterval(() => {
 if (isPrompted()) {
 setRemaining(getRemainingTime());
 }
 }, 1000);
 return () => {
 clearInterval(interval);
 };
 }, []);
 return (
 <Modal
 close={handleStillHere}
 onConfirm={handleLogout}
 open={open}
 >
 <Box>
 {moment(remaining).minutes()}:{moment(remaining).seconds()}
 </Box>
 </Modal>
 );
};
export default IdleTimer;