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

export default class CountdownTimer extends Component {
  constructor() {
    super();
    this.state = {
      minutes: 0,
      seconds: 0
    };
  }

  onSliderChange(value) {
    this.setState({ minutes: value });
  }

  render() {
    const { minutes, seconds } = this.state;

    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
          max={60}
          min={0}
          renderLabel={false}
          value={minutes}
          onChange={(v) => this.onSliderChange(v)}
        />

        <Button
          iconName="play"
        />
      </div>
    );
  }
}

CountdownTimer.propTypes = {
  time: PropTypes.number.isRequired
};

@@ -39,44 +39,8 @@
 t';%0A
-import PropTypes from 'prop-types';%0A
 impo
@@ -289,15 +289,850 @@
 s: 0
+,%0A      isPlaying: false,%0A      disableSlider: false%0A    %7D;%0A  %7D%0A%0A  tick() %7B%0A    const %7B minutes, seconds %7D = this.state;%0A%0A    if (seconds %3E 0) %7B%0A      this.setState(%7B seconds: seconds - 1 %7D);%0A    %7D else if (minutes %3E 0) %7B%0A      this.setState(%7B%0A        minutes: minutes - 1,%0A        seconds: 59%0A      %7D);%0A    %7D%0A  %7D%0A%0A  pause() %7B%0A    this.setState(%7B%0A      isPlaying: false,%0A      disableSlider: false%0A    %7D);%0A%0A    clearInterval(this.ticker);%0A  %7D%0A%0A  resume() %7B%0A    const %7B minutes, seconds %7D = this.state;%0A%0A    if (minutes === 0 && seconds === 0) return;%0A%0A    this.setState(%7B%0A      isPlaying: true,%0A      disableSlider: true%0A    %7D);%0A%0A    this.ticker = setInterval(() =%3E this.tick(), 1000);%0A  %7D%0A%0A  onMediaControlClick() %7B%0A    const isPlaying = this.state.isPlaying;%0A%0A    if (isPlaying) %7B%0A      this.pause();%0A    %7D else %7B%0A      this.resume();
 %0A    %7D
-;
 %0A  %7D
@@ -1193,16 +1193,28 @@
 s: value
+, seconds: 0
  %7D);%0A  %7D
@@ -1231,32 +1231,38 @@
 () %7B%0A    const %7B
+%0A     
  minutes, second
@@ -1250,32 +1250,38 @@
     minutes,
+%0A     
  seconds
  %7D = this.st
@@ -1260,32 +1260,74 @@
 s,%0A      seconds
+,%0A      isPlaying,%0A      disableSlider%0A   
  %7D = this.state;
@@ -1638,24 +1638,59 @@
     %3CSlider%0A
+          disabled=%7BdisableSlider%7D%0A
           ma
@@ -1846,41 +1846,233 @@
    %3C
-Button%0A          iconName=%22play%22%0A
+div className=%22text-center mt-3%22%3E%0A          %3CButton%0A            active=%7BisPlaying%7D%0A            iconName=%7BisPlaying ? 'pause' : 'play'%7D%0A            onClick=%7B() =%3E this.onMediaControlClick()%7D%0A            className=%22pt-large%22%0A  
     
@@ -2078,16 +2078,18 @@
      /%3E%0A
+  
       %3C/
@@ -2101,82 +2101,26 @@
     
-);%0A  %7D%0A%7D%0A%0ACountdownTimer.propTypes = %7B%0A  time: PropTypes.number.isRequired
+  %3C/div%3E%0A    );%0A  %7D
 %0A%7D
-;
 %0A

Add pause and play functionnality