const SESSION = 'session';
const BREAK = 'break';

function requestNotificationPermission(appPermissions) {
  console.log('init request code')
  // Check if the browser supports notifications
  if (!("Notification" in window)) {
    return;
  }
  // Check whether notification permissions have already been granted
  else if (Notification.permission === "granted") {
    appPermissions = true;
  }
  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      // If the user accepts, let's create a notification
      appPermissions = permission === "granted"
    });
  }
}

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      reset: true,
      on: false,
      settings: {
        session: 20,
        break: 5
      },
      time: {
        min: 20,
        sec: 0
      },
      mode: SESSION,
      permissions: {
        notifications: false
      }
    };
    this.setTime = this.setTime.bind(this);
    this.play = this.play.bind(this);
    this.pause = this.pause.bind(this);
    this.changeMode = this.changeMode.bind(this);
    this.reset = this.reset.bind(this);
    this.tick = this.tick.bind(this);
    requestNotificationPermission(this.state.permissions.notifications);
  }
  
  setTime(mode, inc){
    //update = the new break/session time
    let update = Object.assign({}, this.state.settings);
    update[mode] = update[mode] + inc;
    var time = Object.assign({}, this.state.time);
    if (update[mode] < 1) update[mode] = 1;
    else if (update[mode] > 60) update[mode] = 60;
    //if the clock is in reset mode, the clock time will mirror the settings 
    if (this.state.reset){
      if (this.state.mode == mode) {
        time.min = update[mode];
        time.sec = 0;
      }
    }
    this.setState({
      settings: update,
      time: time
    });
  }
  
  play(){
    if (!this.intervalID) this.intervalID = setInterval(()=>{this.tick()}, 1000);
    this.setState({
      on: true,
      reset: false
    });
  }
  
  pause(){
    if (this.intervalID) {
      clearInterval(this.intervalID);
      this.intervalID = null;
    }
    this.setState({
      on: false
    });
  }
  
  changeMode(){
    if (this.intervalID) {
      clearInterval(this.intervalID);
      this.intervalID = setInterval(()=>{this.tick()}, 1000);
    }
    var mode;
    if (this.state.mode == SESSION){
      mode = BREAK;
    } else {
      mode = SESSION;
    }
    var time = {};
    time.min = this.state.settings[mode];
    time.sec = 0;
    
    // notification
    console.log(this.state.permissions.notifications);
    if (this.state.permissions.notifications){
      var notifText;
      if (mode == 'session') {
        notifText = 'work'
      } else {
        notifText = mode
      }
      new Notification(`It's ${notifText} time!`)
    }
    
    this.setState({
      mode: mode,
      time: time
    });
  }
  
  reset(){
    if (this.intervalID) {
      clearInterval(this.intervalID);
      this.intervalID = null;
    }
    let time = {
      min: 0,
      sec: 0
    };
    if (this.state.mode == SESSION) time.min = this.state.settings.session;
    else time.min = this.state.settings.break;
    this.setState({
      on: false,
      reset: true,
      time: time
    });
  }
  
  tick(){
    let time = Object.assign({}, this.state.time);
    var mode = this.state.mode.slice();
    time.sec = time.sec - 1;
    if (time.sec < 0) {
      if (time.min > 0){
        time.min = time.min - 1;
        time.sec = 59;
      } else {
        if (mode == SESSION){
          mode = BREAK;
        } else {
          mode = SESSION;
        }
        time.min = this.state.settings[mode];
        time.sec = 0;
      }
    }
    this.setState({
      time: time,
      mode: mode
    });
  }
  
  render(){
    return(
      <div id='App'>
        <div className='Title'>pomodoro clock</div>
        <ClockContainer
          time={this.state.time}
          mode={this.state.mode}
          on={this.state.on}
          onStyle={this.state.on? ' Clock-container-on' : ''}
        />
        <Control
          on={this.state.on}
          play={this.play}
          pause={this.pause}
          changeMode={this.changeMode}
          reset={this.reset}
        />
        <Settings
          session={this.state.settings.session}
          break={this.state.settings.break}
          setTime={this.setTime}
        />
      </div>
    );   
  }
}
// Clock display
class ClockContainer extends React.Component {
  constructor(props){
    super(props);
  }
  
  digitize(num){
    if (num < 10){
      return '0' + num;
    } else {
      return num.toString();
    }
  }
  render(){
    return(
      <Clock
        onStyle={this.props.onStyle}
        min={this.digitize(this.props.time.min)}
        sec={this.digitize(this.props.time.sec)}
        workClass={
          this.props.mode != SESSION ? 
            '' : this.props.on ?
            ' Clock-mode-on' : ' Clock-mode-inactive'}
        breakClass={
          this.props.mode == BREAK ? 
            (this.props.on ? 
            ' Clock-mode-on' : ' Clock-mode-inactive')
          : ''}
      />
    );
  }
}
class Clock extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div 
        id='Clock'
        className={'Clock-container' + this.props.onStyle}>
        <div 
          id='Clock-work'
          className={'Clock-mode' + this.props.workClass}
        >WORK</div>
        <div className='Clock-display'>
          {this.props.min}:{this.props.sec}
        </div>
        <div 
          id='Clock-break'
          className={'Clock-mode' + this.props.breakClass}
        >BREAK</div>
      </div>
    );
  }
}


// Control buttons
class Control extends React.Component {
  constructor(props){
    super(props);
  }  
  render(){
    return(
      <div id='Control-box'>
        <ControlButton
          name='play'
          icon={this.props.on ? 'fa fa-pause' : 'fa fa-play'}
          caption={this.props.on ? 'Pause' : 'Play'}
          function={this.props.on ? this.props.pause : this.props.play}
        />
        <ControlButton
          name='mode'
          icon='fa fa-random'
          caption='Change mode'
          function={this.props.changeMode}
        />
        <ControlButton
          name='reset'
          icon='fa fa-undo-alt'
          caption='Reset'
          function={this.props.reset}
        />
      </div>
    );
  }
}
class ControlButton extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div 
        id={'Control-button-' + this.props.name}
        className='Control-button'
        title={this.props.caption}
        onClick={this.props.function}>
        <i className={this.props.icon} />
      </div>
    );
  }
}
// Settings
class Settings extends React.Component {
  constructor(props){
    super(props);
  }
  
  render(){
    return(
      <div 
        id='Settings'
        className='Settings-container'>
        <SettingsNodeContainer
          side='left'
          name='session'
          value={this.props.session}
          function={this.props.setTime}
        />
        <SettingsNodeContainer
          side='right'
          name='break'
          value={this.props.break}
          function={this.props.setTime}
        />
      </div>
    );
  }
}
class SettingsNodeContainer extends React.Component {
  constructor(props){
    super(props);
    this.handleWheel = this.handleWheel.bind(this);
  }
  
  colorDegree(num){
    let hue = num*6-1;
    return {
      color: 'hsl('+ hue +',90%,70%)'
    };
  }
  handleWheel(e){
    this.props.function(this.props.name, Math.abs(e.deltaY)/(-e.deltaY));
  }
  render(){
    let label = 
        <div id={this.props.name + '-label'}
          className='Settings-label'>
          {this.props.name}
        </div>;
    
    return(
      <SettingsNode
        name={this.props.name}
        left={this.props.side == 'left' ? label : null}
        right={this.props.side == 'right' ? label : null}
        value={this.props.value}
        colorDegree={this.colorDegree(this.props.value)}
        increment={()=>this.props.function(this.props.name, 1)}
        decrement={()=>this.props.function(this.props.name, -1)}
        handleWheel={this.handleWheel}
      />
    );
  }
}
class SettingsNode extends React.Component {
  constructor(props){
    super(props);
  }
  
  render(){
    return(
      <div 
        id={'Settings-' + this.props.name}
        className='Settings-node'
        onWheel={this.props.handleWheel}>
        {this.props.left}
        <div className='Settings-knob'>
          <div 
            id={this.props.name + '-increment'}
            onClick={this.props.increment}
            className='Settings-knob-arrow arrow-up'
          />
          <div 
            className='Settings-knob-value'
            style={this.props.colorDegree}>
            {this.props.value}
          </div>
          <div 
            id={this.props.name + '-decrement'}
            onClick={this.props.decrement}
            className='Settings-knob-arrow arrow-down'
          />
        </div>
        {this.props.right}
      </div>
    );
  }
}

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