import React, { Component } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import { Temporal } from 'https://cdn.skypack.dev/@js-temporal/polyfill';
//import react stuff and Temporal object that manages time and date

const BEEP = 'https://www.pacdv.com/sounds/interface_sound_effects/sound101.wav';

//create main stateful component
class TimerApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentCycle: "session", //state that contains info of the current cycle 'session' or 'break'. It controls elements that change depending on current cycle
      sessionSettingsTimer:  Temporal.Duration.from({minutes: 25, seconds: 0}), //state that contains the duration of 'session'. They can be changed by incrementing or decrementing
      breakSettingsTimer: Temporal.Duration.from({minutes: 5, seconds: 0}), //state that contains the duration of 'break'. They can be changed by incrementing or decrementing
      hasBegun: false, //state that contains information whether we have already started a session. used to block incrementing/decrementing
      ongoing: false, //controls whether the timer is currently running or not
      currentTimer: Temporal.Duration.from({minutes: 25, seconds: 0}), //currently running and being constantly updated timer
      intervalID: 0 //id of the timeout that is currently in the queue
    }
    //binding those functions~
    this.handleReset = this.handleReset.bind(this);
    this.minutesToDuration = this.minutesToDuration.bind(this); 
    this.secondsToDuration = this.secondsToDuration.bind(this);
    this.handleIncrement = this.handleIncrement.bind(this);
    this.handleDecrement = this.handleDecrement.bind(this);
    this.handleStartStop = this.handleStartStop.bind(this);
    this.countdown = this.countdown.bind(this);
    this.updateState = this.updateState.bind(this);
    this.cycleSwitch = this.cycleSwitch.bind(this);
  }

  //function adds extra zero infront for digids lower than 10. for display purposes
  secondsToDuration({seconds}) {
    let convert = (x) => x < 10 ? '0' + x : `${x}`;
    return convert(seconds)
  }

  //function adds extra zero infront for digids lower than 10. for display purposes
  minutesToDuration({minutes}) {
    let convert = (x) => x < 10 ? '0' + x : `${x}`;
    return convert(minutes)
  }

  //function that handles incrementing the settings timer for both cycle types. Cannot go higher than 60 mins
  handleIncrement(event) {
    //it's blocked if the timer has already been started. need to reset to enable it again
    if(!this.state.hasBegun) this.setState(state => {
      //since there is separate state for break and session settings, determine which element is being clicked
      let cycle = event.target.value + 'SettingsTimer';
      let newDuration = state[cycle].add(Temporal.Duration.from({minutes: 1}));
      return state[cycle].minutes < 60 ? ({
        [cycle]: newDuration,
        //if using settings of currently dispalyed timer update currentTimer as well
        currentTimer: state.currentCycle == event.target.value ? newDuration : state.currentTimer
      }) : 0
    })
  }

  //function that handles decrementing the settings timer for both cycle types. Cannot go lower than 0 
  handleDecrement(event) {
    if(!this.state.hasBegun) this.setState(state => {
      let cycle = event.target.value + 'SettingsTimer';
      let newDuration = state[cycle].subtract(Temporal.Duration.from({minutes: 1}));
      return state[cycle].minutes > 1 ? ({
        [cycle]: newDuration,
        currentTimer: state.currentCycle == event.target.value ? newDuration : state.currentTimer
      }) : 0
    });
  }
//reset button click handler
  handleReset() {
    //clear current interval in the queue
    clearInterval(this.state.intervalID);
    //in case reset was hit while beeping, stop it
    stopAlarm();
    //bring all the state to it's default value
    this.setState({
      currentCycle: "session",
      sessionSettingsTimer:  Temporal.Duration.from({minutes: 25, seconds: 0}),
      breakSettingsTimer: Temporal.Duration.from({minutes: 5, seconds: 0}),
      hasBegun: false,
      ongoing: false,
      currentTimer: Temporal.Duration.from({minutes: 25, seconds: 0}),
      intervalID: 0
    });
  }

  //start_stop click handler
  handleStartStop() {
    this.setState(state => ({
      //swap ongoing from false to true / from true to false 
      ongoing: !state.ongoing,
      //mark the beginning of the session
      hasBegun: true
    }));
//if the ongoing is false start countdown. it has to be negated here because the state will update after the handler function ends. which means at this point it's stil false.
    if(!this.state.ongoing) {
      this.countdown()
    } else {
      //otherwise if it's true, clear current timeout in the queue
      clearTimeout(this.state.intervalID);
    }
  }
//function that creates 1s timeout and stores it's ID in the state. it takes a state updating callback
  countdown() {
    let id = setTimeout(this.updateState, 1000);
    this.setState(state => ({intervalID: id}));
  }
//state updating callback of setTimeout
  updateState() {
    //remaining duration of current cycle
    let remainingDuration = this.state.currentTimer;
    //new duration that is one second lower than the previous one
    let newDuration = remainingDuration.subtract(Temporal.Duration.from({seconds: 1}));
    console.log(newDuration);
    //if new duration will be 0:00 play beeps
    if(newDuration.minutes == 0 & newDuration.seconds == 0) alarm();
    //if the remaining duration is 0:00 run a cycle switching function
    if(remainingDuration.minutes == 0 & remainingDuration.seconds == 0) {
      this.cycleSwitch();
    }
    else {
      //otherwise update state with new duration
      this.setState(state => {
        return ({
          currentTimer: newDuration
        })
      });
    }
    //and call countdown again if we still haven't clicked stop.
    if(this.state.ongoing) this.countdown();
  }
//cycle switch function that changes the cycle and updates the current timer with the time from settings
  cycleSwitch() {
    this.setState(state => {
      return this.state.currentCycle == 'session' ? ({
        currentCycle: 'break',
        currentTimer: state.breakSettingsTimer
      }) : ({
        currentCycle: 'session',
        currentTimer: state.sessionSettingsTimer
      })
    });
  }


  render() {
    //check actual components for info
    return (
      <div id="main-container">
        <MainLabel cycle={this.state.currentCycle}/>
        <MainTimer cycle={this.state.currentCycle} minutes={this.minutesToDuration(this.state.currentTimer)} seconds={this.secondsToDuration(this.state.currentTimer)} />
        <div id="settings-container">
          <Controls reset={this.handleReset} handleClick={this.handleStartStop} startStop={this.state.ongoing ? 'Stop' : 'Start'}/>
          <BreakSessionTools cycle='session' minutes={this.state.sessionSettingsTimer.minutes} increment={this.handleIncrement} decrement={this.handleDecrement} />
          <BreakSessionTools cycle='break' minutes={this.state.breakSettingsTimer.minutes} increment={this.handleIncrement} decrement={this.handleDecrement} />
        </div>
        <audio id="beep" src={BEEP}></audio>
        <footer>created by ryonu</footer>
      </div>
    )}
}

//MainLabel takes only current cycle name to display which session is currently ongoing and adjust the styling class
const MainLabel = (props) => <div id="timer-label" className={props.cycle + '-text'}>{props.cycle[0].toUpperCase() + props.cycle.slice(1)}</div>

//MainTimer also takes name of current session to adjust the class but also takes minutes and seconds to display them generated by the ~ToDuration functions.
const MainTimer = (props) => <div id="time-left" className={props.cycle}>{props.minutes + ':' + props.seconds}</div>

//Controls gets onClick handler and start_stop inner text changes dependign on the ongoing state. also gets onClick handler for reset button
const Controls = (props) => (
  <div id="controls-container">
    <button className='settings-button button' id="start_stop" onClick={props.handleClick} >{props.startStop}</button>
    <button className='settings-button button' id="reset" onClick={props.reset}>Reset</button>
  </div>
)

//BreakSessionTools take cycle name to determin settings as well as minutes for which cycle to display. It also takes event handlers for increment and decrement buttons. We are settings value of the buttons depending to which cycle they correspond be able to adjust proper state
const BreakSessionTools = (props) => (
  <div className={props.cycle + "-order settings-box"}>
    <div id={props.cycle + '-label'}>{props.cycle[0].toUpperCase() + props.cycle.slice(1) + ' duration'}</div>
    <div id={props.cycle + '-length'} className={props.cycle} >{props.minutes}</div>
    <div className="tools-box">
      <button id={props.cycle + '-increment'} className='button increment' value={props.cycle} onClick={props.increment} >+</button>
      <button id={props.cycle + '-decrement'} className='button decrement' value={props.cycle} onClick={props.decrement} >-</button>
    </div>
  </div>
)

//beep 3 times
const alarm = () => {
  let beep = document.getElementById('beep');
  beep.loop = true;  
  beep.play();
  let count = 0;
  //event listener that executes on time update of audio element.
  beep.addEventListener('timeupdate', function() {
    //every time duration equals to zero we know it just finished a loop. when the count equals to 2 it means we beeped 2 times and we can stop the beepi
    if(this.currentTime == 0) {
      count += 1;
    }
    if(count == 2) {
      stopAlarm();
    }
  })
}
//stop beeping
const stopAlarm = () => {
  let beep = document.getElementById('beep');
  beep.pause();
  beep.currentTime = 0;
}



ReactDOM.render(<TimerApp />, document.getElementById('main'));