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 (
        <>
            <input value={state.hours}
                onChange={e => setStateInt({ hours: e.target.value, count: getTotalSeconds(e.target.value, state.minutes, state.seconds) })}
                type="number" />
            <input value={state.minutes}
                onChange={e => setStateInt({ minutes: e.target.value, count: getTotalSeconds(state.hours, e.target.value, state.seconds) })}
                type="number" />
            <input value={state.seconds}
                onChange={e => 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 })*/}
            <Render timer={timer} />
            <br />
            <button onClick={() => start()}>Start</button>
            <button onClick={() => pause()}>Pause</button>
            <button onClick={() => reset()}>Reset</button>
            <button onClick={() => stop()}>Stop</button>
        </>
    );
}
const SecondsTimer = (props) => <h2>{props.timer.totalSeconds}</h2>;
function App() {

    return (
        <>
            <div className="App">
                <TimerContainer count={10} render={SecondsTimer} />
            </div>
        </>
    );
}

export default App;