document.addEventListener('DOMContentLoaded', function() {
  function label(element, value) {
    if(element.hasAttribute('value')) {
      if(value !== undefined) {
        element.setAttribute('value', value)
      } else {
        return element.getAttribute('value')
      }
    } else {
      if(value !== undefined) {
        element.textContent = value
      } else {
        return element.textContent
      }
    }
  }

  function countdownDeleteButton(event) {
    const btn = event.target
    const countdown = btn.getAttribute('data-countdown')

    if(countdown != 0) {
      event.preventDefault()
      btn.classList.add('__on-countdown')

      const hasCountdown = countdown !== null
      const newCountdown = hasCountdown ? countdown - 1 : 3

      if(!hasCountdown) {
        btn.setAttribute('data-label', label(btn))
      }

      label(btn, newCountdown)
      btn.setAttribute('data-countdown', newCountdown)
      setTimeout(countdownDeleteButton, 1000, event)
    } else {
      label(btn, btn.getAttribute('data-label'))
    }
  }

  document.querySelectorAll('.delete-btn').forEach(function(btn) {
    btn.addEventListener('click', countdownDeleteButton)
  })
})