const accurateInterval = (fn, time) => {
  let cancel, nextAt, timeout, wrapper;
  nextAt = new Date().getTime() + time;
  timeout = null;
  wrapper = () => {
    nextAt += time;
    timeout = setTimeout(wrapper, nextAt - new Date().getTime());
    return fn();
  }
  cancel = () => {
    return clearTimeout(timeout);
  }
  timeout = setTimeout(wrapper, nextAt - new Date().getTime());
  return {
    cancel: cancel
  }
}

class TimeController extends React.Component {
  render() {
    return (
      <div>
        <h4 
          id={this.props.titleID}
          className="label"
        >{this.props.title}</h4>
        
        <div className="time-control">
          <button
            id={this.props.minusID}
            value="−"
            onClick={this.props.onClick}
          >−</button>

          <p 
            id={this.props.lengthID}
            className="display"
          >{this.props.length}</p>

          <button
            id={this.props.plusID}
            value="+"
            onClick={this.props.onClick}
          >+</button>
        </div>
      </div>  
    );
  }
}

class PomodoroTimer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breakLength: 5, // min
      sessionLength: 25, // min
      timerState: 'off',
      timerType: 'Session',
      timer: 1500, // # of sec in 25 min
      intervalID: '',
      intervalCount: 0,
      tomatoes: ''
    };
    this.setBreakLength = this.setBreakLength.bind(this);
    this.setSessionLength = this.setSessionLength.bind(this);
    this.lengthControl = this.lengthControl.bind(this);
    this.timerControl = this.timerControl.bind(this);
    this.startCountDown = this.startCountDown.bind(this);
    this.decrementTimer = this.decrementTimer.bind(this);
    this.phaseControl = this.phaseControl.bind(this);
    this.switchTimer = this.switchTimer.bind(this);
    this.addIntervalCount = this.addIntervalCount.bind(this);
    this.beep = this.beep.bind(this);
    this.formatTime = this.formatTime.bind(this);
    this.reset = this.reset.bind(this);
  }
  
  setBreakLength(e) {
    this.lengthControl(
      'breakLength',
      e.currentTarget.value,
      this.state.breakLength,
      'Session'
    );
  }
  
  setSessionLength(e) {
    this.lengthControl(
      'sessionLength',
      e.currentTarget.value,
      this.state.sessionLength,
      'Break'
    );
  }
  
  lengthControl(stateToChange, operator, currentLength, timerType) {
    if (this.state.timerState === 'on') {
      return false;
    }
    if (this.state.timerType === timerType) {
      if (operator === '−' && currentLength !== 1) {
        this.setState({ [stateToChange]: currentLength - 1 }); 
      } else if (operator === '+' && currentLength !== 60) {
        this.setState({ [stateToChange]: currentLength + 1 });
      }
    } else if (operator === '−' && currentLength !== 1) {
      this.setState({ 
        [stateToChange]: currentLength - 1,
        timer: currentLength * 60 - 60 
      });
    } else if (operator === '+' && currentLength !== 60) {
      this.setState({
        [stateToChange]: currentLength + 1,
        timer: currentLength * 60 + 60
      });
    }
  }
  
  timerControl() {
    if (this.state.timerState === 'off') {
      this.startCountDown();
      this.setState({ timerState: 'on' });
    } else {
      this.setState({ timerState: 'off' });
      if (this.state.intervalID) {
        this.state.intervalID.cancel();
      }
    }
  }
  
  startCountDown() {
    this.setState({
      intervalID: accurateInterval(() => {
        this.decrementTimer();
        this.phaseControl();
      }, 1000)
    });
  }
  
  decrementTimer() {
    this.setState({ timer: this.state.timer - 1 });
  }
  
  phaseControl() {
    let timer = this.state.timer;
    this.beep(timer);
    if (timer < 0) {
      if (this.state.intervalID) {
        this.state.intervalID.cancel();
      }
      if (this.state.intervalCount > 4) {
        this.setState({
          tomatoes: ''
        });
      }
      if (this.state.timerType === 'Session') {
        this.addIntervalCount();
        this.startCountDown();
        this.switchTimer(this.state.breakLength * 60, 'Break');
      } else {
        this.addIntervalCount();
        this.startCountDown();
        this.switchTimer(this.state.sessionLength * 60, 'Session');
      }
    }
  }
  
  switchTimer(num, str) {
    this.setState({
      timer: num, 
      timerType: str,
    });
  }
  
  addIntervalCount() {
    if (this.state.sessionCount === this.state.breakCount) {
      this.setState({
        intervalCount: this.state.intervalCount + 0.5
      });
    } 
    if (Number.isInteger(this.state.intervalCount)) {
      this.setState({
        tomatoes: this.state.tomatoes + '🍅'
      });
    }
  }
  
  beep(_timer) {
    if (_timer === 0) {
      this.audioBeep.play();
    }
  }
  
  formatTime() {
    let minutes = Math.floor(this.state.timer / 60);
    let seconds = this.state.timer - minutes * 60;
    seconds = seconds < 10 ? `0${seconds}` : seconds;
    minutes = minutes < 10 ? `0${minutes}` : minutes;
    return `${minutes}:${seconds}`;
  }
  
  reset() {
    this.setState({
      breakLength: 5, 
      sessionLength: 25, 
      timerState: 'off',
      timerType: 'Session',
      timer: 1500, 
      intervalID: '',
      intervalCount: 0,
      tomatoes: ''
    });
    if (this.state.intervalID) {
      this.state.intervalID.cancel();
    } 
    this.audioBeep.pause();
    this.audioBeep.currentTime = 0;
  }
  
  render() {
    
    return (
      <div id="pomodoro">
        <div id="title">
          <h1>
            <a 
              href="https://en.wikipedia.org/wiki/Pomodoro_Technique"
              target="_blank"
              >Pomodoro Timer
            </a>
          </h1>
        </div>

        <div id="content">
          <div id="settings">
            <div id="break-group">
              <TimeController
                title="Break Length"
                titleID="break-label"
                minusID="break-decrement"
                plusID="break-increment"
                length={this.state.breakLength}
                lengthID="break-length"
                onClick={this.setBreakLength}
              />
            </div>
            <div id="session-group">
              <TimeController
                title="Session Length"
                titleID="session-label"
                minusID="session-decrement"
                plusID="session-increment"
                length={this.state.sessionLength}
                lengthID="session-length"
                onClick={this.setSessionLength}
              />
            </div>
          </div>

          <div id="right-display">
            <div id="timer-group">
              <h4 id="timer-label">{this.state.timerType}</h4> 
              <h1 id="time-left">{this.formatTime()}</h1>
              <div className="time-control control-wrap">
                <button 
                  id="start_stop" 
                  onClick={this.timerControl}
                  >Start/Pause
                </button>

                <button 
                  id="reset" 
                  onClick={this.reset}
                  >Reset
                </button>
              </div>
            </div>
            <div id="interval-count">
              <h4>Interval Count: <span id="num">{this.state.tomatoes}</span></h4>
            </div>
          </div>
        </div>

        <audio 
          id="beep"
          preload="auto"
          ref={(audio) => {
            this.audioBeep = audio;
          }}
          src="https://actions.google.com/sounds/v1/cartoon/cowbell_ringing.ogg"  
        />
      </div>
    );
  }
}

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