import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Button, Slider } from '@blueprintjs/core';
import { twoDigits } from '../../../utils/countdown-timer';

export default class CountdownTimer extends PureComponent {

  componentWillUnmount() {
    clearInterval(this.ticker);
  }

  tick() {
    const {
      currentRound,
      minutes,
      seconds,
      totalRounds,
      goToNextPhase,
      setMinutes,
      setSeconds
    } = this.props;

    if (
      currentRound >= totalRounds &&
      minutes === 0 &&
      seconds === 0
    ) return this.pause();

    if (seconds > 0) {
      setSeconds(seconds - 1);
      this.audio.play();
    } else if (minutes > 0) {
      setMinutes(minutes - 1);
      setSeconds(59);
      this.audio.play();
    } else {
      goToNextPhase();
    }
  }

  pause() {
    const { pause: _pause } = this.props;
    clearInterval(this.ticker);
    _pause();
  }

  resume() {
    const {
      currentRound,
      currentPhase,
      minutes,
      resume: _resume,
      seconds,
      totalRounds
    } = this.props;

    if ((currentRound > totalRounds) || (
      minutes === 0 &&
      seconds === 0 &&
      currentRound === totalRounds &&
      currentPhase === 1
    )) return;

    this.ticker = setInterval(() => this.tick(), 1000);
    _resume();
  }

  onMediaControlClick() {
    const { isPlaying } = this.props;
    if (isPlaying) this.pause();
    else this.resume();
  }

  onSliderChange(value) {
    const { setMinutes, setSeconds } = this.props;
    setMinutes(value);
    setSeconds(0);
  }

  render() {
    const {
      disableSlider,
      isPlaying,
      minutes,
      seconds,
      goToNextPhase,
      resetTimer
    } = this.props;

    return (
      <div className="count-down">
        <div className="zf-timer">
          <span className="zf-timer-minute">{twoDigits(minutes)}</span>
          <span className="zf-timer-divider">:</span>
          <span className="zf-timer-seconds">{twoDigits(seconds)}</span>
        </div>

        <Slider
          disabled={disableSlider}
          max={60}
          min={0}
          renderLabel={false}
          value={minutes}
          onChange={(v) => this.onSliderChange(v)}
        />

        <div className="text-center mt-5">
          <Button
            iconName="redo"
            onClick={resetTimer}
            className="pt-large"
          />
          <Button
            active={isPlaying}
            iconName={isPlaying ? 'pause' : 'play'}
            onClick={() => this.onMediaControlClick()}
            className="pt-large mx-3"
          />
          <Button
            iconName="chevron-forward"
            onClick={goToNextPhase}
            className="pt-large"
          />
        </div>

        <audio
          src="resources/tick.mp3"
          ref={(audio) => { this.audio = audio; }}
        />
      </div>
    );
  }
}

CountdownTimer.propTypes = {
  currentRound: PropTypes.number.isRequired,
  currentPhase: PropTypes.number.isRequired,
  disableSlider: PropTypes.bool.isRequired,
  minutes: PropTypes.number.isRequired,
  isPlaying: PropTypes.bool.isRequired,
  seconds: PropTypes.number.isRequired,
  totalRounds: PropTypes.number.isRequired,
  goToNextPhase: PropTypes.func.isRequired,
  pause: PropTypes.func.isRequired,
  resetTimer: PropTypes.func.isRequired,
  resume: PropTypes.func.isRequired,
  setMinutes: PropTypes.func.isRequired,
  setSeconds: PropTypes.func.isRequired
};

@@ -315,20 +315,27 @@
 %0A  %7D%0A%0A  
-tick
+hasReachEnd
 () %7B%0A   
@@ -335,32 +335,52 @@
 ) %7B%0A    const %7B%0A
+      currentPhase,%0A
       currentRou
@@ -434,65 +434,8 @@
 unds
-,%0A      goToNextPhase,%0A      setMinutes,%0A      setSeconds
 %0A   
@@ -456,18 +456,22 @@
 s;%0A%0A    
-if
+return
  (%0A     
@@ -544,21 +544,213 @@
 ds === 0
+ &&
 %0A    
+  currentPhase === 1%0A    );%0A  %7D%0A%0A  tick() %7B%0A    const %7B%0A      minutes,%0A      seconds,%0A      goToNextPhase,%0A      setMinutes,%0A      setSeconds%0A    %7D = this.props;%0A%0A    if (this.hasReachEnd()
 ) return
@@ -1132,296 +1132,67 @@
 st %7B
-%0A      currentRound,%0A      currentPhase,%0A      minutes,%0A      resume: _resume,%0A      seconds,%0A      totalRounds%0A    %7D = this.props;%0A%0A    if ((currentRound %3E totalRounds) %7C%7C (%0A      minutes === 0 &&%0A      seconds === 0 &&%0A      currentRound === totalRounds &&%0A      currentPhase === 1%0A    
+ resume: _resume %7D = this.props;%0A%0A    if (this.hasReachEnd(
 )) r

Create reach end function