import React, {useRef, useState,useEffect} from 'react';

const Ctime = () => {
    const [timerDays, setTimerDays] = useState('00');
    const [timerHours, setTimerHours] = useState('00');
    const [timerMinutes, setTimerMinutes] = useState('00');
    const [timerSeconds, setTimerSeconds] = useState('00');

    let interval = useRef();

    const startTime =() => {
        const countdownDate = new Date('Oct 15, 2021 00:00:00').getTime();

        interval = setInterval(()=>{
            const now = new Date().getTime();
            const distance = countdownDate - now;

            const days = Math.floor(distance / (1000*60*60*24));
            const hours = Math.floor((distance % (1000*60*60*24)) / (1000*60*60));
            const minutes = Math.floor((distance % (1000*60*60)) / (1000*60));
            const seconds = Math.floor((distance % (1000*60))/ 1000);

            if (distance<0){
                
                clearInterval(interval.current);
            }else{
                
                setTimerDays(days);
                setTimerHours(hours);
                setTimerMinutes(minutes);
                setTimerSeconds(seconds);
            }

        },1000);
    };

   
    useEffect(() => {
        startTime();
        return () => {
            clearInterval(interval.current);
        };
    });


    return (
        <div>
           <div class="container">         
            <div className="content">
              <h3 className="title">Countdown Timer</h3>
              <p className="description">鐵人賽完賽日期倒數計時</p>
             <div className="count-down">
                 <div className="box">
                   <h3 id="days">{timerDays}</h3>
                   <p>days</p>
                 </div>
                 <div className="box">
                   <h3 id="hours">{timerHours}</h3>
                   <p>hours</p>
                 </div>
                 <div className="box">
                   <h3 id="minutes">{timerMinutes}</h3>
                   <p>minutes</p>
                 </div>
                 <div className="box">
                   <h3 id="seconds">{timerSeconds}</h3>
                   <p>seconds</p>
                 </div>
                </div>       
              </div>
            </div> 
        </div>
    )
}

export default Ctime