import React, { Component } from 'react';
import '../App.css';

class Timer extends Component{

  constructor(props){
    super(props);
    this.state = {
      time: null,
      minutes: 0,
      seconds: 0,
      intervalID: null,
    }
    this.calculateTime = this.calculateTime.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  startTimer(){
    this.setState({intervalID: setInterval(this.calculateTime, 1000)});
  }

  stopTimer(){
    clearInterval(this.state.intervalID);
    this.setState({intervalID: null});
  }

  toggleTimer(){
    if(this.state.intervalID){
      this.stopTimer()
    }else{
      if(this.state.time < 0){
        this.setState({time: this.props.time}, this.calculateTime)
      }else{
        this.startTimer()
      }
    }
  }

  timerEnd(){
    if(this.state.time === 0){
      this.stopTimer();
    }
  }

  calculateTime(){
    const minutes = Math.floor(this.state.time / 60000);
    let seconds = (this.state.time % 60000) / 1000;
    if(seconds < 10){
      seconds = "0" + seconds;
    }
    this.setState({
      minutes: minutes,
      seconds: seconds,
      time: this.state.time - 1000,
    }, this.timerEnd())
  }

  componentDidMount(){
    if(this.state.time !== null){
      this.calculateTime()
    }
  }

  handleSubmit(e){
    e.preventDefault()
    const ms = this.refs.minutes.value * 60000
    this.setState({time: ms}, this.calculateTime)
  }

  render(){

    let timerButtonClass = this.state.intervalID ? "stop" : "start"

    let timerButtonText = "Start"
    
    if(this.state.intervalID){
      timerButtonText = "Stop"
    }

    if(this.state.time < 0){
      timerButtonText = "Reset"
    }

    if(this.state.time !== null){
      return(
        <div className="componentContainer">
          <h2 className="timeText">{this.state.minutes} : {this.state.seconds}</h2>
          <button className={timerButtonClass} onClick={() => this.toggleTimer()}>{timerButtonText}</button>
        </div>
      )
    }else{
      return(
        <div className="componentContainer">
          <form onSubmit={this.handleSubmit}>
            <input type="text" ref="minutes" /><span>minutes</span>
            <input type="submit" value="Create Timer" />
          </form>
        </div>
      )
    } 
  }
}

export default Timer;
@@ -148,16 +148,41 @@
 ate = %7B%0A
+      initialTime: null,%0A
       ti
@@ -663,33 +663,33 @@
 this.state.time 
-%3C
+%3E
  0)%7B%0A        thi
@@ -677,24 +677,81 @@
 e %3E 0)%7B%0A    
+    this.startTimer()%0A      %7D%0A    %7D%0A  %7D%0A%0A  resetTimer()%7B%0A
     this.set
@@ -772,15 +772,22 @@
 his.
-props.t
+state.initialT
 ime%7D
@@ -812,61 +812,8 @@
 me)%0A
-      %7Delse%7B%0A        this.startTimer()%0A      %7D%0A    %7D%0A
   %7D%0A
@@ -1420,16 +1420,23 @@
 te(%7B
+%0A      
 time: ms
 %7D, t
@@ -1431,16 +1431,45 @@
 time: ms
+,%0A      initialTime: ms,%0A    
 %7D, this.
@@ -1682,76 +1682,8 @@
  %7D%0A%0A
-    if(this.state.time %3C 0)%7B%0A      timerButtonText = %22Reset%22%0A    %7D%0A%0A
     
@@ -1964,16 +1964,112 @@
 button%3E%0A
+          %3Cbutton className=%7BtimerButtonClass%7D onClick=%7B() =%3E this.resetTimer()%7D%3EReset%3C/button%3E%0A
         

Add reset button to timer