window.addEventListener('DOMContentLoaded', () => {
  displayLocalTimestamps();
  for (const el of document.querySelectorAll('.option input[type=checkbox], .option input[type=radio]')) {
    el.onclick = updateVotesRemaining;
  }
  const banner = document.querySelector('.banner');
  if (banner) {
    banner.onclick = hideBanner;
  }
});

function displayLocalTimestamps() {
  for (const el of document.getElementsByTagName('time')) {
    const dateObj = new Date(el.getAttribute('datetime'));
    const relDate = compareDateToToday(dateObj);
    el.innerText = relDate === 0
      ? `Today, ${dateObj.toLocaleTimeString()}`
      : dateObj.toLocaleDateString();
  }
}

function compareDateToToday(date) {
  const today = new Date();
  if (today.getDate() === date.getDate()
    && today.getMonth() === date.getMonth()
    && date.getFullYear() === today.getFullYear()) {
    return 0;
  }
  today.setHours(0, 0, 0, 0);
  return today > date ? -1 : 1;
}

function updateVotesRemaining() {
  const numChecked = document
    .querySelectorAll('.option input[type=checkbox]:checked, .option input[type=radio]:checked')
    .length;
  const votesRemainingElement = document.querySelector('.votes-remaining');
  const total = votesRemainingElement.dataset.maxVotes;
  const remaining = Math.max(0, total - numChecked);
  const plural = remaining === 1 ? '' : 's';
  votesRemainingElement.innerText = `${remaining} Vote${plural} remaining`;
  const voteButton = document.querySelector('button[name=submit_vote]');
  const canVoteInitial = voteButton.dataset.canVote === 'true';
  voteButton.disabled = !canVoteInitial || (total - numChecked) < 0 || numChecked === 0;
}

function hideBanner() {
  //const banner = document.querySelector('.success-banner');
  const banner = document.querySelector('.banner-wrapper');
  const animationEnd = findTransitionEnd();
  banner.addEventListener(animationEnd, animationEnded);
  const rect = banner.getBoundingClientRect();
  console.log('Setting height to ', `${rect.height}px`);
  banner.style.height = `${rect.height}px`;
  banner.classList.add('hiding');
}

function animationEnded(event) {
  const banner = event.target;
  const isPhase1End = !banner.classList.contains('resizing');
  banner.innerText = '';
  if (isPhase1End) {
    console.log('Resizing');
    banner.classList.add('resizing');
    banner.style.height = '0';
  } else {
    event.target.removeEventListener(findTransitionEnd(), animationEnded);
    event.target.classList.add('hidden');
  }
}

function findTransitionEnd() {
  const e = document.createElement('div');
  const animations = {
      'transition': 'transitionend',
      'OTransition': 'oTransitionEnd',
      'MozTransition': 'transitionend',
      'WebkitTransition': 'webkitTransitionEnd'
  };
  for (const a in animations) {
      if (e.style[a] !== undefined) {
          return animations[a];
      }
  }
}