class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breakLength: 5,
      sessionLength: 25,
      timeLabel: "Session",
      timeLeft: this.convertToTime(60 * 25),
      initialStart: false,
      isPaused: true
    };

    //bind methods
    this.startTimer = this.startTimer.bind(this);
    this.play = this.play.bind(this);
    this.reset = this.reset.bind(this);
    this.incrementSessionTime = this.incrementSessionTime.bind(this);
    this.decrementSessionTime = this.decrementSessionTime.bind(this);
    this.incrementBreakTime = this.incrementBreakTime.bind(this);
    this.decrementBreakTime = this.decrementBreakTime.bind(this);
  }

  //reset to default states
  async reset() {
    this.audioBeep.pause();
    this.audioBeep.currentTime = 0;
    clearInterval(this.state.intervalID);
    await this.setState({
      breakLength: 5,
      sessionLength: 25,
      timeLabel: "Session",
      timeLeft: this.convertToTime(60 * 25),
      initialStart: false,
      isPaused: true
    });
  }

  //Session increment method
  incrementSessionTime() {
    if (!this.state.initialStart) {
      if (this.state.sessionLength < 60) {
        let newSessionLength = this.state.sessionLength + 1;
        this.setState({
          sessionLength: newSessionLength,
          timeLeft: this.convertToTime(60 * newSessionLength)
        });
      }
    }
  }

  //Session decrement method
  decrementSessionTime() {
    if (!this.state.initialStart) {
      if (this.state.sessionLength > 1) {
        let newSessionLength = this.state.sessionLength - 1;

        this.setState({
          sessionLength: newSessionLength,
          timeLeft: this.convertToTime(60 * newSessionLength)
        });
      }
    }
  }

  //Break increment method
  incrementBreakTime() {
    if (!this.state.initialStart) {
      if (this.state.breakLength < 60) {
        this.setState({
          breakLength: this.state.breakLength + 1
        });
      }
    }
  }

  //Session decrement method
  decrementBreakTime() {
    if (!this.state.initialStart) {
      if (this.state.breakLength > 1) {
        this.setState({
          breakLength: this.state.breakLength - 1
        });
      }
    }
  }

  //convert time to display minutes and seconds.
  convertToTime(timer) {
    var displayMinutes = parseInt(timer / 60, 10);
    var displaySeconds = parseInt(timer % 60, 10);
    if (displayMinutes < 10) {
      displayMinutes = "0" + displayMinutes;
    }
    if (displaySeconds < 10) {
      displaySeconds = "0" + displaySeconds;
    }
    return displayMinutes + ":" + displaySeconds;
  }

  //play start timer
  async play() {
    if (this.state.isPaused) {
      this.setState({
        isPaused: false
      });
    } else {
      this.setState({
        isPaused: true
      });
    }
    //only start timer on the initial play hit, until reset.
    if (!this.state.initialStart) {
      this.setState({
        initialStart: true
      });
      this.startTimer(this.state.sessionLength, this.state.breakLength);
    }
  }

  //Start timer
  startTimer(sessionDuration, breakDuration) {
    let isSession = true;
    let timer = 60 * sessionDuration;
    let displayTime = this.convertToTime(timer);

    let intervalID = setInterval(async () => {
      if (!this.state.isPaused) {
        timer -= 1;
      }

      displayTime = this.convertToTime(timer);
      await this.setState({
        timeLeft: displayTime
      });

      if (timer <= 0) {
        if (isSession) {
          isSession = false;
          timer = (await 60) * breakDuration;
        } else {
          isSession = true;
          timer = (await 60) * sessionDuration;
        }
        await this.setState({
          timeLabel: isSession ? "Session" : "Break",
          timeLeft: this.convertToTime(timer)
        });
        this.audioBeep.play();
      }
    }, 1000);

    this.setState({
      intervalID: intervalID
    });
  }

  render() {
    return (
      <div className="App h-100">
        <div className="container h-100">
          <div className="row h-100 justify-content-center align-items-center">
            <div className="col-md-5">
              <SetTime
                labelName="break-label"
                labelContent="Break Length"
                lengthName="break-length"
                timeLength={this.state.breakLength}
                decrementTime={this.decrementBreakTime}
                decrementName="break-decrement"
                incrementTime={this.incrementBreakTime}
                incrementName="break-increment"
              />

              <SetTime
                labelName="session-label"
                labelContent="Session Length"
                lengthName="session-length"
                timeLength={this.state.sessionLength}
                decrementName="session-decrement"
                decrementTime={this.decrementSessionTime}
                incrementName="session-increment"
                incrementTime={this.incrementSessionTime}
              />
            </div>
            <div className="col-md-7">
              <Timer
                timeLabel={this.state.timeLabel}
                timeLeft={this.state.timeLeft}
                playFunction={this.play}
                resetFunction={this.reset}
              />
            </div>
          </div>
        </div>

        <audio
          id="beep"
          ref={audio => {
            this.audioBeep = audio;
          }}
          src="https://res.cloudinary.com/dr5miqz3x/video/upload/v1567621615/Fire_pager_kntsrl.mp3"
        />
      </div>
    );
  }
}

class SetTime extends React.Component {
  render() {
    return (
      <div id="setTimer" className="text-center number-font">
        <h2 id={this.props.labelName}>{this.props.labelContent}</h2>
        <p className="" id={this.props.lengthName}>
          {this.props.timeLength}
        </p>
        <button
          onClick={this.props.decrementTime}
          id={this.props.decrementName}
          className="secondary-button-style"
        >
          -
        </button>
        <button
          onClick={this.props.incrementTime}
          id={this.props.incrementName}
          className="primary-button-style"
        >
          +
        </button>
      </div>
    );
  }
}

class Timer extends React.Component {
  render() {
    return (
      <div id="timer" className="text-center">
        <div className="outer-border container ">
          <div className="inner-tomato">
            <h2 id="timer-label">{this.props.timeLabel}</h2>
            <p id="time-left">{this.props.timeLeft}</p>
          </div>
        </div>
        <button
          id="start_stop"
          className="primary-button-style material-icons"
          onClick={this.props.playFunction}
        >
          play_arrow pause
        </button>
        <button
          id="reset"
          className="secondary-button-style material-icons"
          onClick={this.props.resetFunction}
        >
          replay
        </button>
      </div>
    );
  }
}

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