// DOM.select('.btn-try-in').addEventListener('click', function () {
//   Animate.scrollTo(
//     document,
//     DOM.offset(DOM.select('.section-playground')).top,
//     500
//   )
// })

const cleaveZen = window.cleaveZen
const {
  formatCreditCard,
  formatDate,
  formatTime,
  formatNumeral,
  formatGeneral,
  getCreditCardType,
  registerCursorTracker,
  DefaultCreditCardDelimiter,
  DefaultDateDelimiter,
  DefaultTimeDelimiter,
} = cleaveZen

// credit card
const creditCardInput = document.getElementById("ccn");
const btnClear = DOM.select('.btn-clear')

let selectedCardIcon = null
/*
btnClear.addEventListener('click', function () {
  creditCardInput.value = ''
  if (selectedCardIcon) {
    DOM.removeClass(selectedCardIcon, 'active')
  }

  DOM.addClass(btnClear, 'hidden-right')
  creditCardInput.focus()
})
*/
registerCursorTracker({
  input: creditCardInput,
  delimiter: DefaultCreditCardDelimiter,
})
/*
creditCardInput.addEventListener('focus', function () {
  DOM.removeClass(btnClear, 'hidden-right')
})*/
creditCardInput.addEventListener('input', (e) => {
  const value = e.target.value
  creditCardInput.value = formatCreditCard(value)

  if (selectedCardIcon) {
    DOM.removeClass(selectedCardIcon, 'active')
  }
  const type = getCreditCardType(value)
  selectedCardIcon = DOM.select('.icon-' + type)
  if (selectedCardIcon) {
    DOM.addClass(selectedCardIcon, 'active')
  }
})

// date
const expiryMonthInput = document.querySelector("[name=card\\[expiryMonth\\]]");

expiryMonthInput.addEventListener('input', (e) => {
	e.target.value = e.target.value.substr(0,2);
    expiryMonthInput.value = formatDate(e.target.value, {
        datePattern: ['m'],
	});
});

const expiryYearInput = document.querySelector("[name=card\\[expiryYear\\]]");

expiryYearInput.addEventListener('input', (e) => {
	e.target.value = e.target.value.substr(0,2);
    expiryYearInput.value = formatDate(e.target.value, {
        datePattern: ['y'],
	});
});

const cvvInput = document.querySelector("[name=card\\[cvv\\]]");

function cvvValidate(e) {
  e.target.value = e.target.value.substr(0,4);
  if (e.target.value != "") {
    if (parseInt(e.target.value) < parseInt(e.target.min)) {
      e.target.value = e.target.min;
    }
    if (parseInt(e.target.value) > parseInt(e.target.max)) {
      e.target.value = e.target.max;
    }
  }
}

cvvInput.addEventListener('input', cvvValidate);
