/* ================ */
/*   Break Control  *
/* ================ */

class BreakControl extends React.Component {
  render() {
    return (
      <div id="break-control">
        <h2 id="break-label">Break Length</h2>
        <button 
          id="break-increment"
          onClick={this.props.increment}
          ><i class="fas fa-caret-up"></i>
        </button>
        
        <h2 id="break-length">{this.props.length}</h2>

        <button 
          id="break-decrement"
          onClick={this.props.decrement}
          ><i class="fas fa-caret-down"></i>
        </button>
      </div>
    )
  }
}

/* ================== */
/*   Session Control  */
/* ================== */

class SessionControl extends React.Component {
  render() {
    return(
      <div id="session-control">
        <h2 id="session-label">Session Length</h2>
        <button 
          id="session-increment"
          onClick={this.props.increment}
          ><i class="fas fa-caret-up"></i>
        </button>
        
        <h2 id="session-length">{this.props.length}</h2>

        <button 
          id="session-decrement"
          onClick={this.props.decrement}
          ><i class="fas fa-caret-down"></i>
        </button>
      </div>
    )
  }
}

/* =================== */
/*   Countdown Timer   */
/* =================== */

class Timer extends React.Component {

  render() {
    // Changes title text so timer can be seen when on another page
    document.title = this.props.minutes + ":" + this.props.seconds + " Pomodoro";
    return(
      <div id="timer">
        <h2 id="timer-label">{this.props.headingString}</h2>
        <h2 id="time-left">{this.props.minutes}:{this.props.seconds}</h2>
      </div>
    )
  }
}

/* =================== */
/*    Timer Control    */
/* =================== */

class TimerControl extends React.Component {
  render() {
    return(
      <div id="timer-control">
        <button 
          id="start_stop"
          onClick={this.props.toggle}
          ><i class="fas fa-play"></i> <i class="fas fa-pause"></i></button>
        <button 
          id="reset"
          onClick={this.props.reset}
          ><i class="fas fa-undo"></i>
        </button>
      </div>
    )
  }
}

/* ================ */
/* Main application */
/* ================ */

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breakLength: 5,
      sessionLength: 25,
      secondsRemaining: 1500,
      minutesDisplay: "25",
      secondsDisplay: "00",
      running: false,
      sessionOrBreak: "Session"
    }
    this.breakDecrement = this.breakDecrement.bind(this);
    this.breakIncrement = this.breakIncrement.bind(this);
    this.sessionDecrement = this.sessionDecrement.bind(this);
    this.sessionIncrement = this.sessionIncrement.bind(this);
    this.reset = this.reset.bind(this);
    this.run = this.run.bind(this);
    this.stop = this.stop.bind(this);
    this.toggleRun = this.toggleRun.bind(this);
    
    // Declare interval so it can be stopped
    this.countdown = 0;
  }
  
  /* HANDLE INCREMENT/DECREMENT */
  breakDecrement(){
    if(this.state.breakLength > 1) {
      this.setState((prevState, props) => ({
        breakLength: prevState.breakLength - 1
      }));
    }
  }
  breakIncrement() {
    if(this.state.breakLength < 60){
      this.setState((prevState, props) => ({
        breakLength: prevState.breakLength + 1
      }));
    }
  }
  sessionDecrement() {
    if(this.state.sessionLength > 1){
      this.setState((prevState, props) => ({
        sessionLength: prevState.sessionLength - 1,
        minutesDisplay: prevState.minutesDisplay - 1,
        secondsRemaining: prevState.secondsRemaining - 60
      }));
    }
  }
  sessionIncrement(){
    if(this.state.sessionLength < 60){
      this.setState((prevState, props) => ({
        sessionLength: prevState.sessionLength + 1,
        minutesDisplay: prevState.minutesDisplay + 1,
        secondsRemaining: prevState.secondsRemaining + 60
      }));
    }
  }
  
  reset(){
    this.stop();
    
    this.setState({
      breakLength: 5,
      sessionLength: 25,
      secondsRemaining: 1500,
      minutesDisplay: "25",
      secondsDisplay: "00",
      running: false,
      sessionOrBreak: "Session"
    });
    
    // Stop beeping
    this.audioControl.pause();
    this.audioControl.currentTime = 0;
  }
  
  toggleRun(){
    let running = this.state.running;
    if(running){
      this.stop();
    } else {
      this.run();
    }
  }
  
  
  
  run() {
    // First clear any possible previous interval to prevent bugs
    clearInterval(this.countdown);

    this.countdown = setInterval( () => {
      if(this.state.secondsRemaining >= 1 ){
        
        // First set to "running" and then count a second before updating the DOM
        this.setState((prevState, props) => ({
          running: true,
          secondsRemaining: prevState.secondsRemaining - 1,
        }));
        
        var minutesRaw = Math.floor(this.state.secondsRemaining / 60);
        var secondsRaw = Math.floor(this.state.secondsRemaining % 60);
        var seconds = String(secondsRaw).padStart(2,0);
        var minutes = String(minutesRaw).padStart(2,0);
        
        // Update virtual DOM
        this.setState((prevState, props) => ({
          minutesDisplay: minutes,
          secondsDisplay: seconds
        }));
        
      } else {
        // When timer runs down
        this.audioControl.play();
        var periodType = "";
        var periodLength;
        
        if(this.state.sessionOrBreak === "Session"){
          periodType = "Break";
          // Adding one seems kinda hacky
          periodLength = (this.state.breakLength * 60) + 1;
        } else {
          periodType = "Session";
          // Adding one seems kinda hacky
          periodLength = (this.state.sessionLength * 60) + 1; 
        }
        
        this.setState((prevState, props) => ({
          sessionOrBreak: periodType,
          secondsRemaining: periodLength
        }));
      }
    }, 1000);
  }
  
  stop() {
    clearInterval(this.countdown);

    this.setState({
      running: false
    })
  }
  
  render() {
    // Debug
    //console.log(this.state);
    return (
      <div id="app">
        <h1>Pomodoro Timer</h1>
        <BreakControl length={this.state.breakLength} decrement={this.breakDecrement} increment={this.breakIncrement} />
        <SessionControl length={this.state.sessionLength} decrement={this.sessionDecrement} increment={this.sessionIncrement} />
        <Timer headingString={this.state.sessionOrBreak} minutes={this.state.minutesDisplay} seconds={this.state.secondsDisplay} />
        <TimerControl toggle={this.toggleRun} reset={this.reset} />
        <audio 
          id="beep"
          src="https://goo.gl/65cBl1"
          // Audio controls reference
          ref={ref => this.audioControl = ref}
          >
        </audio>
      </div> 
    )
  }
}

/* ================== */
/* React DOM Renderer */
/* ================== */

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