// @flow

const playAnimation = ({keyCode}) => {
  const audio = window.document.querySelector(`audio[data-key="${keyCode}"]`)
  if (audio) {
    audio.currentTime = 0
    audio.play()
    window.document
      .querySelector(`div.key[data-key="${keyCode}"]`)
      .classList
      .add('playing')
  }
}

window.addEventListener('keydown', playAnimation)

const resetAnimation = ({
  propertyName
  , 'target': elt
}) => {
  if (propertyName === 'transform') {
    elt.classList
      .remove('playing')
  }
}

window.document
  .querySelectorAll('div.key')
  .forEach(key => key.addEventListener('transitionend', resetAnimation))