import h, { classNames } from 'lib/h'
import * as soundsLib from 'sounds'
import * as play from 'view/sequencer/play'
import * as addRemoveBeat from 'view/sequencer/addRemoveBeat'
import * as block from 'view/sequencer/block'

export function view() {
  let index = -1
  let blocks = [true]
  let blocksNode = h('div', 
    { className: 'g-Sequencer__Blocks' }, 
    block.view({ 
      checked: true,
      onCheck: checked => blocks[0] = checked
    })
  )

  let onNextStep = (sounds: soundsLib.Sounds) => {
    let oldIndex = index
    let newIndex = (index + 1) % blocks.length
    index = newIndex

    let oldBlock = blocksNode.childNodes[oldIndex] as HTMLElement
    if (oldBlock !== undefined) oldBlock.classList.remove('g-Sequencer__Block--Beat')

    let newBlock = blocksNode.childNodes[newIndex] as HTMLElement
    newBlock.classList.add('g-Sequencer__Block--Beat')

    if (blocks[newIndex]) soundsLib.playKick(sounds)
  }

  let sequencer = h('div', { className: 'g-Sequencer' },
    play.view({
      onNextStep,
      onStop: () => {
        let block = blocksNode.childNodes[index] as HTMLElement
        block.classList.remove('g-Sequencer__Block--Beat')
        index = -1
      }
    }),
    addRemoveBeat.view({
      initBeats: 1,
      onRemove: index => {
        let lastBlock = blocksNode.childNodes[index]
        blocksNode.removeChild(lastBlock)
        blocks.pop()
      },
      onAdd: index => {
        blocks.push(false)
        blocksNode.appendChild(block.view({ 
          checked: false,
          onCheck: checked => blocks[index] = checked
        })) 
      }
    }),
    blocksNode
  )

  return sequencer
}