const colors = ['#9400D3', '#4B0082', '#0000FF', '#00FF00', '#FFFF00', '#FF7F00', '#FF0000']
let iColor = 0

const $stack1 = document.querySelector('.stack1')
const $stack2 = document.querySelector('.stack2')

const $results = document.querySelector('.results')

const $enqueue = document.querySelector('.btn-enqueue')
const $dequeue = document.querySelector('.btn-dequeue')

let iItem = 0

$enqueue.addEventListener('click', enqueue)
$dequeue.addEventListener('click', dequeue)

function enqueue () {
  if ($stack1.children.length >= 8) { return }
  if ($stack1.children.length >= 7) {
    $enqueue.disabled = true
  }
  const rect = $stack1.getBoundingClientRect()
  const $item = document.createElement('div')
  $item.className = 'item'
  $item.textContent = iItem++
  $item.style.backgroundColor = colors[(iColor++) % colors.length]
  $item.style.opacity = '0'
  $item.style.transform = `translate3d(0, ${-rect.height * 1.5}px, 0)`
  $stack1.appendChild($item)
  $item.offsetHeight
  $item.style.opacity = '1'
  $item.style.transform = 'translate3d(0, 0, 0)'
}

async function dequeue () {
  if ($stack2.children.length > 0) {
    await stackToResults($stack2)
  } else if ($stack1.children.length > 0) {
    $enqueue.disabled = true
    $dequeue.disabled = true
    await stack1ToStack2()
    await stackToResults($stack1)
  }
  $enqueue.disabled = false
  $dequeue.disabled = false
}

async function stackToResults ($stack) {
  await new Promise(resolve => {
    const $item = $stack.children[$stack.children.length - 1]
    const { top, left } = $item.getBoundingClientRect()
    $item.remove()
    $item.style = `
      position: absolute;
      top: ${top}px;
      left: ${left}px;
      background-color: ${$item.style.backgroundColor};
    `
    const forwardStyle = `
      position: absolute;
      top: 0;
      left: ${$results.children.length * 5}vw;
      width: 5vw;
      height: 20vh;
      background-color: ${$item.style.backgroundColor};
      transition: none;
    `
    const id = `gen` + Date.now()
    const destroyKeyframe = addKeyframes(`
      40% {
        top: 0;
      }
      100% { ${forwardStyle} }`,
      id,
    )
    function animationend () {
      $item.style = forwardStyle
      $item.removeEventListener('animationend', animationend)
      destroyKeyframe()
      resolve()
    }
    $item.addEventListener('animationend', animationend)
    $item.style.animation = `1s ${id}`
    $results.appendChild($item)
  })
}

async function stack1ToStack2 () {
  while($stack1.children.length > 1) {
    await new Promise(resolve => {
      const $item = $stack1.children[$stack1.children.length - 1]
      const rStack1 = $stack1.getBoundingClientRect()
      const rStack2 = $stack2.getBoundingClientRect()
      const { top, left, height } = $item.getBoundingClientRect()
      $item.remove()
      $item.style = `
        position: absolute;
        top: ${top}px;
        left: ${left}px;
        background-color: ${$item.style.backgroundColor};
      `
      $stack2.appendChild($item)
      const id = `gen` + Date.now()
      const destroyKeyframe = addKeyframes(`
        30% {
          top: ${rStack1.top}px;
          left: ${left}px;
        }
        60% {
          top: ${rStack1.top - 150}px;
          left: ${left + rStack1.width / 2}px;
        }
        90% {
          top: ${rStack2.top}px;
          left: ${rStack2.left + $stack2.clientLeft}px;
        }
        100% {
          top: ${rStack2.top + (8 - $stack2.children.length) * height}px;
          left: ${rStack2.left + $stack2.clientLeft}px;
        }
        `,
        id,
      )
      function setStatic () {
        $item.style.position = 'static'
        $item.removeEventListener('animationend', setStatic)
        destroyKeyframe()
        resolve()
      }
      $item.addEventListener('animationend', setStatic)
      $item.style.animation = `1s ${id}`
    })
  }
}

function addKeyframes (style, id) {
  const cssAnimation = document.createElement('style')
  cssAnimation.type = 'text/css'
  const rules = document.createTextNode(`@keyframes ${id} { ${style} }`)
  cssAnimation.appendChild(rules)
  document.getElementsByTagName("head")[0].appendChild(cssAnimation)
  return () => cssAnimation.remove()
}