//variables colors. Constants
const primaryColor = "#26a69a";
const secondaryColor = "#ffeb3b";
const stopColor = "#e53935";

//variables times
let sessionTime = 25;
let breakTime = 5;
let currentTime = 25;

//clock state
var clockState = "off";

//session and break functions
var runSession, runBreak;

//timer interval
var timer;

//let's begin
$(function(){  
  //first capture the buttons and spans
  //progress bar
  let pBar = $("#progress-bar");
  let pBarParent = pBar.parent();
  //current state
  let currentState = $("#current-state");
  //break
  let subBreak = $("#sub-break");
  let breakValue = $("#break-time");
  let addBreak = $("#add-break");
  //session
  let subSession = $("#sub-session");
  let sessionValue = $("#session-time");
  let addSession = $("#add-session");
  //clock
  let clock = $("#clock");
  let borderWrapper = $("#border-wrapper");
  //start/stop
  let startStop = $("#start-stop");
  
  //functions to execute break actions
  let subtractBreak = function(){ 
    if(breakTime > 1){
      breakTime--;
      updateDisplay(breakTime, "break");
    }
    else{
      toast("Can't have a break shorter than a minute.", 3000);
    }
  };
  let addToBreak = function(){
    breakTime++;
    updateDisplay(breakTime, "break");
  };
  //subtract from break
  subBreak.click(subtractBreak);
  //add to break
  addBreak.click(addToBreak);

  
  //functions to execute session actions
  let subtractSession = function(){
    if(sessionTime > 5){
      sessionTime--;
      updateDisplay(sessionTime, "session");
    }
    else{
      toast("Less than 5 minutes, seriously? Nah.", 4000);
    }
  };
  let addToSession = function(){
    sessionTime++;
    updateDisplay(sessionTime, "session");
  };
  //subtract from session
  subSession.click(subtractSession);
  addSession.click(addToSession);
  
  //run session function
  runSession = function(){
    currentState.text("WORK");
    //change colors to break
    pBarParent.css("background-color", "#acece6");
    pBar.css("background-color", primaryColor);
    borderWrapper.css("border-color", primaryColor);
    
    
    let _sessionTime = sessionTime;
    let hours = Math.floor(_sessionTime/60);
    let minutes = (_sessionTime % 60);
    let seconds = 00;
    
    updateClock(clock, hours, minutes, seconds);
    //countdown function
    countDown(clock, hours, minutes);   
    //progressBar
    runPBar(_sessionTime*60);
  };
  //run break function
  runBreak = function(){
    currentState.text("BREAK");
    //change colors to break
    pBarParent.css("background-color", "#fffde7");
    pBar.css("background-color", secondaryColor);
    borderWrapper.css("border-color", secondaryColor);
    
    
    let _breakTime = breakTime;
    let hours = Math.floor(_breakTime/60);
    let minutes = (_breakTime % 60);
    let seconds = 00;
    
    updateClock(clock, hours, minutes, seconds);
    //countdown function
    countDown(clock, hours, minutes);
    //progressBar
    runPBar(_breakTime*60);
  }
  
  
  //the start stop functions
  startStop.click(function(){
    let button = $(this);
    if(clockState === "off"){
      //start
      button.css("background-color", stopColor);
      button.text("STOP");
      runSession();
      clockState = "session";
    }
    else{
      //stop it
      clockState = "off";
      button.css("background-color", primaryColor);
      button.text("START");
      pBar.finish();
    }
  });
  
  //progress bar function
  var runPBar = function(seconds){
    const initialSeconds = seconds*1000;
    pBar.animate({width: "100%"}, initialSeconds, "linear", function(){
      pBar.width(0);
    }); 
  }
  

});
  
//toast function
function toast(message, duration){
  var duration = duration;
  if(arguments.length === 1){
    duration = 2000;
  }
  Materialize.toast(message, duration);
}

//update break and session spans
function updateDisplay(withWhat, whichOne){
  if(whichOne === "break"){
    $("#break-time").html(withWhat + "m");
  }
  else if(whichOne === "session"){
    $("#session-time").html(withWhat + "m");
  }
}

//function to update clock
function updateClock(clock, hours, minutes, seconds){
    let html;
    if (hours > 0){
      html = `<span>${hours}h</span>
              <span>${minutes}m</span>
              <span>${seconds}s</span>`;
    }
    else if(minutes > 0){
      html = `<span>${minutes}m</span>
              <span>${seconds}s</span>`;
    }
  else{
    html = `<span>${seconds}s</span>`;
  }
    clock.html(html);
}

//function to countdown
function countDown(clock, hours, minutes){
  let seconds = 60;
  //sorting out that weird bug at 60 minutes
  if(minutes === 0 && hours > 0){
    var hours = hours - 1;
    minutes = 59;
  }
  else{
    var minutes = minutes -1;
  }
  
  var timer = setInterval(function(){
    if(clockState != "off"){
      if(hours > 0 || minutes > 0 || seconds > 0){
        if(seconds > 0){
          seconds--;
          updateClock(clock, hours, minutes, seconds);
        }
        else{
          if(minutes > 0){
            minutes--;
            updateClock(clock, hours, minutes, seconds);
            seconds = 59;
          }
          else{
            hours--;
            updateClock(clock, hours, minutes, seconds);
            minutes = 59;
          }

        }
      }
      else{
        clearInterval(timer);
        if(clockState === "session"){
          runBreak();
          clockState = "break";
        }
        else if(clockState === "break"){
          runSession();
          clockState = "session";
        }
      }
    }
    else{
      clearInterval(timer);
    }
    
  }, 1000);
}