import logo from './logo.svg';
import React, { useState, useEffect } from 'react';
import './App.scss';
import { getTimeData, getTotalSeconds } from './utills';
const TimerContainer = ({ count, render, refresh = 1000 , running = false}) => {
let [state, setState] = useState({ paused: !running, count, ...getTimeData(count) });
useEffect(() => {
let timer = undefined;
if (!state.paused) {
if (state.count > 0) {
const now = new Date();
const nextTime = Math.max(1, 1000 - (now.getTime() % refresh));
timer = setInterval(() => setStateInt({ count: state.count - 1 }), nextTime);
}
else
pause();
}
return () => clearInterval(timer);
}, [state]);
const setStateInt = newState => setState(state = { ...state, ...newState });
const start = () => setStateInt({ paused: false });
const pause = () => setStateInt({ paused: true });
const reset = () => setStateInt({ count });
const stop = () => {
pause();
reset();
}
let timer = getTimeData(state.count);
let Render = render;
return (
<>
setStateInt({ hours: e.target.value, count: getTotalSeconds(e.target.value, state.minutes, state.seconds) })}
type="number" />
setStateInt({ minutes: e.target.value, count: getTotalSeconds(state.hours, e.target.value, state.seconds) })}
type="number" />
setStateInt({ seconds: e.target.value, count: getTotalSeconds(state.hours, state.minutes, e.target.value) })}
type="number" />
{/*{time.hours} : {time.minutes} : {time.seconds}*/}
{/*React.cloneElement(render, { ...render.props, timer })*/}
>
);
}
const SecondsTimer = (props) =>