import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';

// Watch
// TimerContainer
const TimerContainer = ({ seconds, refresh, render }) => {
    const [count, setCount] = useState(seconds) // отслеживаем состояние количества секунд
    const [isRunning, setIsRunning] = useState(false) // отслеживаем состояние кнопки стоп/старт для таймера
    const Render = render

    useEffect(() => { setCount(seconds) }, [seconds]) // синхронизируем count с передаваемыми seconds

    console.log('count ', count)

    // Таймер
    useEffect(() => { // эффект, отвечающий за то, когда счетчик прошле в 0, он его переводит в состояние паузы
        if (count <= 0) {
            setIsRunning(false)
        }
    }, [count <= 0])

    useEffect(() => { // сам счетчик
        if (isRunning) {
            const start = performance.now()

            const int = setInterval(() => {

                const diff = Math.floor((performance.now() - start) / refresh)
                setCount(count => count - diff)
            }, refresh)

            return () => clearInterval(int)
        }
    })

    return (
        <div>
            <h2>Watch</h2>
            <Render ms={count} />
            <button onClick={() => setIsRunning(!isRunning)}>{isRunning ? 'Pause' : 'Start'}</button>
        </div >
    )
}

const Watch = ({ ms }) => {

    const h = Math.floor(ms / 60 / 60) * 30 // умножаем на 30, чтоы перевести число часов в градусы циферблата
    const m = (Math.floor(ms / 60) - (h * 60 / 30)) * 6 // умножаем на 6, чтоы перевести число минут в градусы циферблата
    const s = ms % 60 * 6 // умножаем на 6, чтоы перевести число секунд в градусы циферблата

    return (
        <div style={{ cssText: 'width: 500px; height: 500px' }}>
            <img style={{ cssText: 'position:absolute' }} src='http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace.png'></img>
            <img style={{ cssText: `position: absolute; transform: rotate(${h}deg)` }} src='http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_H.png' />
            <img style={{ cssText: `position: absolute; transform: rotate(${m}deg)` }} src='http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_M.png' />
            <img style={{ cssText: `position: absolute; transform: rotate(${s}deg)` }} src='http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_S.png' />
        </div>
    )
}


function App() {
    return (
        <div className="App">
            <header>

                {/* <Watch /> */}
                {/*20852 милисекунд - это 5 часов, 47 минут,32 секунды */}
                <TimerContainer seconds={20852} refresh={100} render={Watch} />

            </header>
        </div>
    );
}

export default App;