const h = require('hyperscript')
const TITLE = 'double - main'

function view (state, emit) {
  if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE)

  const form = h('form.pv3', [
    h('div.pb2', [
      h('label', 'debit account'),
      h('div', h('select#debit', [
        h('option', {value: 'true'},'select'),
        generateAccountList()
      ]))
    ]),
    h('div.pb2', [
      h('label', 'credit account'),
      h('div', h('select#credit', [
        h('option', {value: 'true'},'select'),
        generateAccountList()
      ]))
    ]),
    h('div', h('input#amount.mb2', {placeholder: 'amount'})),
    h('div', h('input#description', {placeholder: 'description'}))
  ])

  const submit = h('div.pb3', h('button', {onclick: handleEntry}, 'submit'))

  const entries = h('div.pb6', [
    h('table', [
      h('thead', h('tr', [
        h('td.pr2', 'account'),
        h('td.pr2', 'debit'),
        h('td.pr2', 'credit'),
        h('td.pr2', 'description')
      ])),
      h('tbody', state.entries.map(entry => ['debit', 'credit'].map(i => {
        return i === 'debit'
          ? h('tr', [
            h('td', entry.msg.debit),
            h('td', entry.msg.amount),
            h('td', '-'),
            h('td', entry.msg.description)
          ])
          : h('tr', [
            h('td', entry.msg.credit),
            h('td', '-'),
            h('td', entry.msg.amount),
            h('td', entry.msg.description)
          ])
      })))
    ])
  ])

  return h('body.code.ph3.lh-copy', [
    h('main', [
      h('div', 'double'),
      form,
      submit,
      entries
    ]),
    h('div', [
      h('form.pb3', h('input#account')),
      h('button', {onclick: handleAccountCreate}, 'create account')
    ]),
    h('div.pv2', 'account balances'),
    Object.keys(state.accounts).map(key => {
      if (state.accounts[key].archived) {
        return h('div', [
          h('div.dib.strike', {onclick: handleAccountArchive}, state.accounts[key].name),
          h('div.dib.pr2.strike', state.accounts[key].debit - state.accounts[key].credit)
        ])
      }
      return h('div', [
        h('div.dib.pr2', {onclick: handleAccountArchive}, state.accounts[key].name),
        h('div.dib', state.accounts[key].debit - state.accounts[key].credit)
      ])
    })
  ])


  function generateAccountList () {
    return Object.keys(state.accounts).map(key => {
      if (state.accounts[key].archived) return
      const name = state.accounts[key].name
      return h('option', {value: name}, name)
    })
  }

  function handleEntry () {
    const amount = parseFloat(document.getElementById('amount').value)
    const debit = document.getElementById('debit').value
    const credit = document.getElementById('credit').value
    const description = document.getElementById('description').value

    emit('entries', { type: 'entries', msg: { amount, debit, credit, description } })
  }

  function handleAccountCreate () {
    const name = document.getElementById('account').value

    emit('accounts', { type: 'accounts', msg: { name, debit: 0, credit: 0, archived: false } })
  }

  function handleAccountArchive () {
    const name = this.innerHTML

    emit('accounts', { type: 'accounts', msg: { name, archived: true } })
  }
}

module.exports = view