import h, { classNames } from 'lib/h'

interface Params {
  checked: boolean,
  onCheck: (checked: boolean) => void
}

export function column(xs: Array<Params>) {
  return h('ol',
    { className: 'g-Sequencer__Column' },
    ...xs.map(params => h('li', {}, block(params)))
  )
}

function block({ checked, onCheck }: Params) {
  return h('div', 
    { className: classNames({
        'g-Sequencer__Block': true,
        'g-Sequencer__Block--Checked': checked
      }),
      onclick: (e: Event) => {
        checked = !checked
        onCheck(checked)
        let target = e.target as HTMLElement
        if (target !== undefined) {
          if (checked) {
            target.classList.add('g-Sequencer__Block--Checked')
          } else {
            target.classList.remove('g-Sequencer__Block--Checked')
          }
        }
      }
    }
  )
}