const cvcButtonListener = () => {
  cvcButtonContainer.addEventListener('click', () => slideCvc(cvc, cvcButton, cvcInput));
}
const show = (cvc, button, input) => {
  cvc.classList.remove('cvc-hidden');
  cvc.classList.add('cvc-show');
  
  input.classList.remove('cvc-input-show-hide');
  input.classList.add('cvc-input-show');

  button.classList.remove('cvc-button-up');
  button.classList.add('cvc-button-down');
  $('.cvc .input').focus();
}
const hide = (cvc, button, input) => {
  cvc.classList.remove('cvc-show');
  button.classList.remove('cvc-button-down');
  
  input.classList.remove('cvc-input-show-show');
  input.classList.add('cvc-input-hide');

  cvc.classList.add('cvc-hidden');
  button.classList.add('cvc-button-up');
  $('.cvc .input').blur();
}
const slideCvc = (cvc, button, input) => {
  let hidden = false;
  
  const classList = Object.values(cvc.classList);
  for( let i = 0; i < classList.length; i++) {
    if(classList[i] === "cvc-hidden")
      hidden = true
  }
  
  if(hidden === true) {
    show(cvc, button, input)
  } else { 
    hide(cvc, button, input)
  }
}

const tabNumbers = () => {
  const max = 4;
  const numberInputs = document.querySelectorAll('.number .input');
  numberInputs[0].focus();
  $('.number .input').on('keyup', (e) => {
    cardType(numberInputs[0]);
    const length = e.currentTarget.value.length;
    const curIndex = e.currentTarget.tabIndex;
    if(length >= max) {
      for(let i = 0; i < max; i++){
        const index = parseInt(numberInputs[i].attributes.tabIndex.value, 10);
        if(curIndex+1 == 4) {
          const date = document.querySelectorAll('.date input')[0];
          date.focus();
          break;
        }
        if(index == (curIndex+1)) {
          numberInputs[i].focus();
          break;
        }
      }
    }
  });
}
const tabDates = () => {
  const max = 2;
  const dateInputs = document.querySelectorAll('.date .input');
  $('.date .input').on('keyup', (e) => {
    const length = e.currentTarget.value.length;
    const curIndex = e.currentTarget.tabIndex;
    if(length >= max) {
      for(let i = 0; i < max; i++){
        const index = parseInt(dateInputs[i].attributes.tabIndex.value, 10);
        if(curIndex+1 == 6) {
          const name = document.querySelectorAll('.name .input')[0];
          name.focus();
          break;
        }
        if(index == (curIndex+1)) { 
          dateInputs[i].focus();
          break;
        }
      }
    }
  });
}
const nameEnter = () => {
  const nameInputs = document.querySelectorAll('.name .input');
  $('.name .input').on('keydown', (e) => {
    if (e.shiftKey || e.ctrlKey || e.altKey) {
      e.preventDefault();
    } else {
      const key = e.keyCode;
      if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
        e.preventDefault();
      }
    }
    
    const curIndex = e.currentTarget.tabIndex;
    if(e.which === 13) {
      if(curIndex === 6) {
        nameInputs[1].focus();
      }
      if(curIndex === 7) {
        document.querySelector('.cvc .input').focus();
        show(cvc, cvcButton, cvcInput);
      }
    }
  });
}
const cvcEnter = () => {
  $('.cvc .input').on('keydown', (e) => {
    if(e.which === 13) {
      hide(cvc, cvcButton, cvcInput);
    }
  });
}
const cardType = (e) => {
  const num = parseInt(e.value[0]);
  if(num === 4){
    // Visa
    $('.visa').removeClass('hidden');
    
    $('.discover').addClass('hidden');
    $('.amex').addClass('hidden');
    $('.master').addClass('hidden');
    $('.default-card').addClass('hidden');
  } else if(num === 5){
    // MasterCard
    $('.master').removeClass('hidden');
    
    $('.discover').addClass('hidden');
    $('.amex').addClass('hidden');
    $('.visa').addClass('hidden');
    $('.default-card').addClass('hidden');
  } else if(num === 3){
    // Amex
    $('.amex').removeClass('hidden');
    
    $('.discover').addClass('hidden');
    $('.visa').addClass('hidden');
    $('.master').addClass('hidden');
    $('.default-card').addClass('hidden');
  } else if(num === 6){
    // Discover
    $('.discover').removeClass('hidden');
    
    $('.visa').addClass('hidden');
    $('.amex').addClass('hidden');
    $('.master').addClass('hidden');
    $('.default-card').addClass('hidden');
  } else {
    $('.default-card').removeClass('hidden');
    
    $('.discover').addClass('hidden');
    $('.amex').addClass('hidden');
    $('.master').addClass('hidden');
    $('.visa').addClass('hidden');
  }
}

const cvcButtonContainer = document.getElementsByClassName('cvc-button-container')[0];
const cvc = document.getElementsByClassName('cvc')[0];
const cvcButton = document.getElementsByClassName('cvc-button')[0];
const cvcInput = document.getElementsByClassName('cvc-input')[0];
const numberInputs = document.querySelectorAll('.number .input');

window.onload = () => {
  hide(cvc, cvcButton, cvcInput);
  cvcButtonListener();
  tabNumbers();
  tabDates();
  nameEnter();
  cvcEnter();
  cvcClick();
}