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


//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
      sessionSettingsMins:  Temporal.Duration.from({minutes: 25, seconds: 0}), //state that contains the duration of 'session'. They can be changed by incrementing or decrementing
      breakSettingsMins: 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
      timestamp: "", //state that contains information when the timer has started 
      ongoing: false, //controls whether the timer is currently running or not
      currentSession: Temporal.Duration.from({minutes: 25, seconds: 0}), //state that contain actual remaining time in the current session
      currentBreak: Temporal.Duration.from({minutes: 5, seconds: 0}), //state that contain actual remaining time in the current session
      readyToChange: false
    }
    //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.handleStart = this.handleStart.bind(this);
    this.handleStop = this.handleStop.bind(this);
    this.cycleSwitch = this.cycleSwitch.bind(this);
  }

  //handles reset button click. resets all options to initial value
  handleReset() {
    clearIntervals(); //clears all ongoing intervals
    //clears the beeping if we hit reset during beeping
    document.getElementById('beep').pause(); 
    document.getElementById('beep').currentTime = 0;
    //brings back all the state to it's starting values
    this.setState(state => ({
      currentCycle: "session",
      sessionSettingsMins:  Temporal.Duration.from({minutes: 25, seconds: 0}),
      breakSettingsMins: Temporal.Duration.from({minutes: 5, seconds: 0}),
      hasBegun: false,
      timestamp: "",
      ongoing: false,
      currentSession: Temporal.Duration.from({minutes: 25, seconds: 0}),
      currentBreak: Temporal.Duration.from({minutes: 5, seconds: 0}),
      readyToChange: false
    }));
  }

  //function that return string with amount of seconds that also contain an extra zero if the value is just one digid
  secondsToDuration({seconds}) {
    let convert = (x) => x < 10 ? '0' + x : `${x}`;
    return convert(seconds)
  }

  //function that return string with amount of minutes that also contain an extra zero if the value is just one digid
  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) {
    if(!this.state.hasBegun) this.setState(state => {
      let cycle = event.target.value + 'SettingsMins';
      let currentCycle = 'current' + event.target.value[0].toUpperCase() + event.target.value.slice(1);
      let newDuration = state[cycle].add(Temporal.Duration.from({minutes: 1}));
      return state[cycle].minutes < 60 ? ({
        [cycle]: newDuration,
        [currentCycle]: newDuration
      }) : 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 + 'SettingsMins';
      let currentCycle = 'current' + event.target.value[0].toUpperCase() + event.target.value.slice(1);
      let newDuration = state[cycle].subtract(Temporal.Duration.from({minutes: 1}));
      return state[cycle].minutes > 1 ? ({
        [cycle]: newDuration,
        [currentCycle]: newDuration
      }) : 0
    });
  }

  //handles start button click. if there is currently no session going, assign currentSession and currentBreak from the settings and mark that the session has begun. also resume the session with changing ongoing to true
  handleStart() {
    if(!this.state.hasBegun) {
      this.setState(state => ({
        hasBegun: true,
        timestamp: Temporal.Now.plainTimeISO().round({smallestUnit: "seconds"}),
        ongoing: true
      }));
    } else {
      this.setState(state => ({
        timestamp: Temporal.Now.plainTimeISO().round({smallestUnit: "seconds"}),
        ongoing: true
      }));
    }

  }

  //pause the session with changing ongoing to pause and resetting the timestamp
  handleStop() {
    clearIntervals();
    this.setState(state => ({
      timestamp: "",
      ongoing: false
    }));
  }
//function that switches the cycle between 'session' and 'break'
  cycleSwitch() {
    clearIntervals();
    alarm();
    let newCycle = this.state.currentCycle == 'session' ? 'break' : 'session';
    this.setState(state => ({
      currentCycle: newCycle,
      timestamp: Temporal.Now.plainTimeISO().round({smallestUnit: "seconds"}),
      readyToChange: false
    }));

  }

  componentDidUpdate() {
    //function that will adjust state within setInterval callback. depending on the cycle it will create new timestamp, reset the timer of the opposite cycle and create a green light to change the cycle. when the session/break minutes and seconds are less than 0 we get a green light. it has to be less than because of the timeouts seem to be inaccurate.
    const setState = (timeSince, intervalID) => {
      this.setState(state => {
        if(this.state.currentCycle == 'session') {
          return ({
            timestamp: Temporal.Now.plainTimeISO().round({smallestUnit: "seconds"}),
            currentSession: state.currentSession.subtract(timeSince),
            currentBreak: state.breakSettingsMins,
            readyToChange: (state.currentSession.minutes <= 0 &&
                            state.currentSession.seconds <= 0) ? true : false
          })
        } else if(this.state.currentCycle == 'break') {
          return ({
            timestamp: Temporal.Now.plainTimeISO().round({smallestUnit: "seconds"}),
            currentSession: state.sessionSettingsMins,
            currentBreak: state.currentBreak.subtract(timeSince),
            readyToChange: (state.currentBreak.minutes <= 0 &&
                            state.currentBreak.seconds <= 0) ? true : false
          })
        }
      })
    };

    console.log("actual timestamp: ", this.state.timestamp);
//when the ongoing is true, meaning the timer is marked to be running, take time stamp marking start of the timer and create an timeout of 1000ms to update the state with exact time to update the timer and new timestamp, therefore creating a loop of updating component
    if(this.state.ongoing) {
      const currentTimeStamp = this.state.timestamp;
      setTimeout(function() {
        let timeNow = Temporal.Now.plainTimeISO().round({smallestUnit: "seconds"});
        let timeSince = timeNow.since(currentTimeStamp);
          setState(timeSince);
      },1000);
      if(this.state.readyToChange) this.cycleSwitch();
    }
  }


  render() {
    //variable that contains name of the current ongoing cycle currentSession or currentBreak
    let currentOngoingCycle = 'current' + this.state.currentCycle[0].toUpperCase() + this.state.currentCycle.slice(1);

    //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[currentOngoingCycle])} seconds={this.secondsToDuration(this.state[currentOngoingCycle])} />
        <div id="settings-container">
          <Controls reset={this.handleReset} handleClick={this.state.ongoing ? this.handleStop : this.handleStart} startStop={this.state.ongoing ? 'Stop' : 'Start'}/>
          <BreakSessionTools cycle='session' minutes={this.state.sessionSettingsMins.minutes} increment={this.handleIncrement} decrement={this.handleDecrement} />
          <BreakSessionTools cycle='break' minutes={this.state.breakSettingsMins.minutes} increment={this.handleIncrement} decrement={this.handleDecrement} />
        </div>
        <audio id="beep" src='https://www.soundjay.com/buttons/sounds/beep-06.mp3'></audio>
      </div>
    )}
}

//MainLabel takes only current cycle name to display which session is currently ongoing and adjust the 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. in case of MainTimer they change depending on the current ongoing session cycle.
const MainTimer = (props) => <div id="time-left" className={props.cycle}>{props.minutes + ':' + props.seconds}</div>

//Controls take onClick handler and startStop change dependign on the cycle that change depending on the current cycle. also takes 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
const BreakSessionTools = (props) => (
  <div class={props.cycle + "-order settings-box"}>
    <div id={props.cycle + '-label'}>{props.cycle[0].toUpperCase() + props.cycle.slice(1) + ' settings'}</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>
)


//clear all intervals that are going on
const clearIntervals = () => {
  let dummyInterval = setInterval(() => {},1);
  for(let i = 0; i <= dummyInterval; i++) {
    clearInterval(i);
  }
}

//beep 3 times
const alarm = () => {
  const beep = document.getElementById('beep');
  beep.loop = true;  
  beep.play();
  let count = 0;
  beep.addEventListener('timeupdate', function() {
    if(this.currentTime == 0) {
      count += 1;
    }
    if(count == 3) {
      this.pause();
      this.currentTime = 0;
    }
  })

}



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