// TODO move this file into assets and use hugo pipes and babel

(function(){
  var modeBtnText = document.getElementById('cs-mode-button-state');
  var states = ["colorscheme-dark", "colorscheme-light", "colorscheme-auto"];
  var labels = ["On", "Off", "Auto"];
  var activeState = -1;

  function toggleColorscheme() {
    for(var i = states.length - 1; i >= 0; i--) {
      if (document.body.classList.contains(states[i])) {
        document.body.classList.remove(states[activeState]);
        activeState = activeState < states.length - 1 ? activeState + 1 : 0;
        document.body.classList.add(states[activeState]);
        modeBtnText.innerText = labels[activeState];
        break;
      }
    }
  }

  // TODO use cookie to record state of dark mode

  for(var i = states.length - 1; i >= 0; i--) {
    if (document.body.classList.contains(states[i])) {
      activeState = i;
      modeBtnText.innerText = labels[activeState];
    }
  }

  if (activeState > -1) {
    document.getElementById('cs-mode-button').addEventListener('click', function() {
      toggleColorscheme();
    })
  } else {
    document.getElementById('cs-mode-container').style.display = "none";
  }
})();