/*
* https://frontendeval.com/questions/countdown-timer
*
* Create a countdown timer that notifies the user
*/

const Button = ({ color, text, onClick }) => {
  return <button class={ color } onClick={ (e) => onClick(e, text) }>{ text }</button>
}

const App = () => {
  const [hours, setHours] = React.useState(null);
  const [minutes, setMinutes] = React.useState(null);
  const [seconds, setSeconds] = React.useState(null);
  const [totalTime, setTotalTime] = React.useState(0);
  const [counting, setCounting] = React.useState(false);
  
  let timerId;
  
  React.useEffect(() => {
    if (totalTime == 0 && counting) {
      resetTimer();
      alertUser();
    }
  }, [totalTime])
  
  startTimer = () => {
    if (!hours && !minutes && !seconds) {
      alertUser();
      return;
    }
    setCounting(true);
    setTotalTime(calculateTime());
    this.interval = setInterval(() => {
      decrementByOneSecond();
    }, 1000)
  }
  
  pauseTimer = () => {
    clearInterval(this.interval);
    setCounting(false);
  }
  
  resetTimer = () => {
    clearInterval(this.interval);
    setHours('');
    setMinutes('');
    setSeconds('');
    setCounting(false);
    setTotalTime(0);
  }
  
  decrementByOneSecond = () => {
    const newTime = totalTime - 1;
    const newHours = Math.floor(newTime / 3600);
    const newMinutes = Math.floor((newTime - (newHours * 3600)) / 60);
    const newSeconds = newTime - (newHours * 3600) - (newMinutes * 60);
    
    setHours((''+newHours).padStart(2, '0'));
    setMinutes((''+newMinutes).padStart(2, '0'));
    setSeconds((''+newSeconds).padStart(2, '0'));
    setTotalTime(time => newTime)
  }
  
  alertUser = () => {
    alert('Timer finished');
  }
  
  calculateTime = () => {
    const time = (+hours) * 60 * 60 + (+minutes) * 60 + (+seconds)
    return time;
  }
  
  return (
    <div class='container'>
      <div class='wrapper'>
        <div class='timer'>
          <h1>Countdown Timer</h1>
          <div class='clock'>
            <input 
              type='number' 
              class='timer__hours' 
              placeholder='HH'
              maxLength={2}
              onChange={(e) => setHours(e.target.value)}
              value={ hours }
              aria-label="Hours"
             ></input>
            <span>:</span>
            <input 
              type='number' 
              class='timer__minutes'
              placeholder='MM'
              maxLength={2}
              onChange={(e) => setMinutes(e.target.value)}  
              value={ minutes }
              aria-label="Minutes"
            ></input>
            <span>:</span>
            <input 
              type='number' 
              class='timer__seconds' 
              placeholder='SS'
              maxLength={2}
              onChange={(e) => setSeconds(e.target.value)}
              value={ seconds }
              aria-label="Seconds"
            ></input>
          </div>
          <div class='buttons'>
            { !counting && <Button color='green' text='Start' onClick={ startTimer }/> }
            { counting && (
              <>
                <Button color='blue' text='Pause' onClick={ pauseTimer }/>
                <Button color='red' text='Reset' onClick={ resetTimer }/>
              </>
            )}
          </div>
        </div>
        <div class='time'><b>{totalTime}</b> seconds left</div>
      </div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'));