'use strict';

const mode = document.querySelector('#mode');
const modes = mode.querySelectorAll('button');

let actualMode = 'autocomplete';

// input to don't take in consideration
const toExcludes = ['includeImages'];

// inputs id that need to be disabled for a specific mode
const disabledForThisMode = {
  autocomplete: [],
  clipboard: ['typing', 'mouseover'],
  'question-to-answer': ['typing', 'infinite', 'mouseover']
};

/**
 * Handle when a mode change to show specific input or to hide them
 */
function handleModeChange() {
  const needDisable = disabledForThisMode[actualMode];
  const dontNeedDisable = inputsCheckbox.filter(
    input => !needDisable.includes(input) && !toExcludes.includes(input)
  );
  for (const id of needDisable) {
    document.querySelector('#' + id).parentElement.style.display = 'none';
  }
  for (const id of dontNeedDisable) {
    document.querySelector('#' + id).parentElement.style.display = null;
  }
}

// Mode hanlder
for (const button of modes) {
  button.addEventListener('click', function () {
    const value = button.value;
    actualMode = value;
    for (const mode of modes) {
      if (mode.value !== value) {
        mode.classList.add('not-selected');
      } else {
        mode.classList.remove('not-selected');
      }
    }
    handleModeChange();
  });
}
