const projectName = "25-5-clock",  // freeCodeCamp testing
      //
      {Component, createRef} = React,
      //
      MIN_LENGTH = 1,
      MAX_LENGTH = 60
      //
      STATE = {
        sessionLength: 25,
        breakLength: 5,
        isSession: true,
        timer: undefined
      }

STATE.time = (STATE.isSession ? STATE.sessionLength : STATE.breakLength) * 60;



class App extends Component {
  constructor(props) {
    super(props);
    
    this.state = STATE;
    
    this.inDe = this.inDe.bind(this);
    this.st = this.st.bind(this);
    this.reset = this.reset.bind(this);
    
    this.beep = createRef();
  }
  
  
  get type() {
    return this.state.isSession ? "session" : "break";
  }
  
  
  componentDidUpdate(prevProps, prevState) {
    const NAME = this.type + "Length";
    
    if (prevState[NAME] != this.state[NAME] || prevState.isSession != this.state.isSession) {
      this.setState(state => ({
        time: state[NAME] * 60
      }));
    }
  }
  
  
  inDe() {
    const [TYPE, COMMAND] = event.target.id.split("-"),
          NAME = TYPE + "Length";
    
    switch(COMMAND) {
      case "increment":
        if (this.state[NAME] < MAX_LENGTH) {
          this.setState(state => ({
            [NAME]: state[NAME] + 1
          }));
        }
        break;
      case "decrement":
        if (this.state[NAME] > MIN_LENGTH) {
          this.setState(state => ({
            [NAME]: state[NAME] - 1
          }));
        }
    }
  }
  
  
  st() {
    this.setState(({timer}) => ({
      timer: timer ? clearInterval(timer) : setInterval(() => {
        this.setState(({time, isSession}) => {
          if (time > 0) {
            time--;
            return {time}
          }
          this.beep.current.play();
          return {
            isSession: !isSession
          }
        });
      }, 1000)
    }));
  }
  
  
  reset() {
    clearInterval(this.state.timer);
    
    this.setState(STATE);
    
    const BEEP = this.beep.current;
    
    BEEP.pause();
    BEEP.currentTime = 0;
  }
  
  
  render() {
    return (
      <>
        <h1 id="title">
          <code>{this.state.sessionLength}</code> <i className="bi bi-plus-lg"/> <code>{this.state.breakLength}</code> Clock <i className="bi bi-clock-history"/>
        </h1>
        <div id="settings">
          {["session", "break"].map((name, i) => {
            const LENGTH = this.state[name + "Length"];
            return (
              <div key={i}>
                <var id={name + "-label"}>{name[0].toUpperCase() + name.substring(1)}<i className="bi bi-stopwatch"/></var>
                <div>
                  <button id={name + "-increment"} onClick={this.inDe} className="bi bi-caret-up-fill" disabled={LENGTH >= MAX_LENGTH}/>
                  <code id={name + "-length"}>{LENGTH}</code>
                  <button id={name + "-decrement"} onClick={this.inDe} className="bi bi-caret-down-fill" disabled={LENGTH <= MIN_LENGTH}/>
                </div>
              </div>
            );
          })}
        </div>
        <div id="clock">
          <p id="timer-label">{this.type.toUpperCase()}</p>
          <h1 id="time-left">
            <samp>{("0" + Math.floor(this.state.time / 60)).slice(-2)}:{("0" + this.state.time % 60).slice(-2)}</samp>
          </h1>
          <audio id="beep" src="https://github.com/SSbit01/freeCodeCamp/blob/main/25%20+%205%20Clock/Beep.mp3?raw=true" ref={this.beep}/>
          <div id="actions">
            <button id="start_stop" onClick={this.st} className={"bi bi-" + (this.state.timer ? "pause-fill" : "play-fill")}/>
            <button id="reset" onClick={this.reset} className="bi bi-arrow-counterclockwise"/>
          </div>
        </div>
      </>
    );
  }
}



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