const h = require('hyperscript')
const TITLE = 'double - entries'
const Nav = require('../components/nav')

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

  const form = h('form', [
    h('div.pb2', [
      h('label.mb2', 'debit account'),
      h('div', h('select#debit', [
        h('option', { value: 'true' }, 'select'),
        generateAccountList()
      ]))
    ]),
    h('div.pb2', [
      h('label.mb2', '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'))

  return h('body.code.ph3.lh-copy', [
    state.cache(Nav, 'nav').render(),
    h('main', [
      form,
      submit
    ])
  ])

  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 } })
  }
}

module.exports = view