const cacheDisplayTimerSession = document.querySelector('.display__time-left_session');
const cacheDisplayTimerBreak = document.querySelector('.display__time-left_break');
const tipHighlightSession = document.querySelector('.tip-highlight-session');
const tipHighlightBreak = document.querySelector('.tip-highlight-break');
const buttons = document.querySelectorAll('[data-time]');
const pause = document.querySelector('#pause-button');
const start = document.querySelector('#start-button');
const reset = document.querySelector('#reset-button');
const sessionHeader = document.querySelector("#session_header");
const breakHeader = document.querySelector("#break_header");
const defaultTimerSession = document.querySelector('.display__time-left_session');
defaultTimerSession.textContent = "00:00";
const defaultTimerBreak = document.querySelector('.display__time-left_break');
defaultTimerBreak.textContent = "00:00";
let countdown;
let mins;
let seconds;
let sessionTimerisEnded = false;
let isPaused = false;
var breakSeconds;
var value_is_set = true;
var value_is_set_break = true;

//console.log(value_is_set + " global");

//*Session timer */
function sessionTimer(seconds) {
  clearInterval(countdown);
  const t = new Date();
  const end = t.getTime() + seconds * 1000;
  displayTimerLeftSession(seconds);
  console.log({
    t,
    end
  });

  countdown = setInterval(() => {
    if (!isPaused) {
      const remainSeconds = Math.round((end - t.getTime()) / 1000);
      if (remainSeconds < 0) {
        clearInterval(countdown);
        breakTimer(breakSeconds);
        console.log(breakSeconds);
        sessionHeader.classList.remove('playing');
        breakHeader.classList.add('playing');

        setTimeout(function() {
          breakHeader.classList.remove('playing');
        }, breakSeconds * 1000 + 3000);
        return;
      }
      displayTimerLeftSession(remainSeconds);
      t.setSeconds(t.getSeconds() + 1);
    }
  }, 1000);
  t.setSeconds(t.getSeconds() + 1) - 1;
}

/*Break timer*/
function breakTimer(breakSeconds) {
  clearInterval(countdown);
  const t = new Date();
  const end = t.getTime() + breakSeconds * 1000;
  displayTimerLeftBreak(breakSeconds);
  console.log({
    t,
    end
  });
  countdown = setInterval(() => {
    if (!isPaused) {
      const remainSeconds = Math.round((end - t.getTime()) / 1000);
      if (remainSeconds < 0) {
        clearInterval(countdown);
        return;
      }
      displayTimerLeftBreak(remainSeconds);
      t.setSeconds(t.getSeconds() + 1);
    }
  }, 1000);
  t.setSeconds(t.getSeconds() + 1) - 1;
}

function displayTimerLeftSession(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainderSeconds = seconds % 60;
  const display = `${minutes}:${remainderSeconds<10?'0':''}${remainderSeconds}`;
  cacheDisplayTimerSession.textContent = display;
  /*   console.log({
      remainderSeconds
    }, {
      minutes
    }); */
}

function displayTimerLeftBreak(breakSeconds) {
  const minutes = Math.floor(breakSeconds / 60);
  const remainderSeconds = breakSeconds % 60;
  const display = `${minutes}:${remainderSeconds<10?'0':''}${remainderSeconds}`;
  cacheDisplayTimerBreak.textContent = display;

  /*   console.log({
      remainderSeconds
    }, {
      minutes
    }); */
}

var quickTime = function() {
  tipHighlightSession.style.display = 'none';
  sessionHeader.classList.add('playing');
  breakHeader.classList.remove('playing');
  seconds = parseInt(this.dataset.time);
  sessionTimer(seconds);
}

buttons.forEach((button) => button.addEventListener('click', quickTime));
document.customFormSession.addEventListener('submit', function(e) {
  e.preventDefault();
  value_is_set = true;
  validateForm();
  //console.log(value_is_set + " customFormSession outside if");
  if (value_is_set) {
    value_is_set = true;
    console.log(value_is_set + " customFormSession inside if");
    tipHighlightSession.style.display = 'none';
    sessionHeader.classList.add('playing');
    breakHeader.classList.remove('playing');
    seconds = this.minutesSession.value * 60;
    displayTimerLeftSession(seconds);
    sessionTimer(seconds);
    this.reset();
  } else {
    value_is_set = false;
    //console.log(value_is_set + " customFormSession inside else");
    tipHighlightSession.style.display = 'block';
  }

});

document.customFormBreak.addEventListener('submit', function(e) {
  e.preventDefault();
  value_is_set_break = true;
  validateFormBreak();
  if (value_is_set_break) {
    tipHighlightBreak.style.display = 'none';
    breakSeconds = this.minutesBreak.value * 60;
    displayTimerLeftBreak(breakSeconds);
    this.reset();
  } else {
    value_is_set_break = false;
    //console.log(value_is_set + " customFormSession inside else");
    tipHighlightBreak.style.display = 'block';
  }

});

pause.addEventListener('click', function() {
  isPaused = true;
  //return;
});

start.addEventListener('click', function() {
  isPaused = false;
});

reset.addEventListener('click', function() {
  sessionTimer(seconds);
});

function validateForm() {
  var x = document.forms["customFormSession"]["minutesSession"].value;
  if (x == "") {
    alert("Please set numbers");
    value_is_set = false;
    console.log(value_is_set + " " + "validateForm");
    return false;
  }
}

function validateFormBreak() {
  var x = document.forms["customFormBreak"]["minutesBreak"].value;
  if (x == "") {
    alert("Please set numbers");
    value_is_set_break = false;
    console.log(value_is_set + " " + "validateForm");
    return false;
  }
}

const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));