import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Text } from '../themes/components';
const addZero = (n) => Math.trunc(n).toString().padStart(2, '0');
const Clock = () => {
    const startedAt = useSelector((state) => state.room.startedAt);
    const requestRef = React.useRef();
    const [timeDiff, setTimeDiff] = React.useState(0);
    const timeoutRef = React.useRef();
    useEffect(() => {
        if (startedAt) {
            const animate = () => {
                setTimeDiff((Date.now() - new Date(startedAt).getTime()) / 1000);
                timeoutRef.current = setTimeout(() => {
                    if (requestRef.current) {
                        requestRef.current = requestAnimationFrame(animate);
                    }
                }, 500);
            };
            requestRef.current = requestAnimationFrame(animate);
        }
        return () => { clearTimeout(timeoutRef.current); cancelAnimationFrame(requestRef.current); };
    }, [startedAt]);
    return (<Text color="textPrimary.400">
				{timeDiff > 60 ? `${addZero(timeDiff / 60)} min ` : null}{(addZero(timeDiff % 60))} sec
			</Text>);
};
export default Clock;
//# sourceMappingURL=Clock.js.map