'use strict'

var State = require('dover')
var Observ = require('observ')
var h = require('virtual-dom/h')
var changeEvent = require('value-event/change')
var types = require('creditcards/types')
var card = require('creditcards/card')

var NumberInput = require('./number')
var ExpirationInput = require('./expiration')
var CvcInput = require('./cvc')

var json = require('./json')

module.exports = CreditCardForm

function CreditCardForm (data) {
  data = data || {}

  return State({
    types: Types(types),
    number: NumberInput(),
    expiration: ExpirationInput(),
    cvc: CvcInput(),
    channels: {
      setType: setType
    }
  })
}

function setType (state, data) {
  state.types[data.name].set(data.value)
}

CreditCardForm.render = function render (state) {
  return h('form', [
    h('link', {
      rel: 'stylesheet',
      href: 'https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css'
    }),
    h('.row', [
      h('label.small-12.columns', [
        'Card number',
        NumberInput.render(state.number, renderStyle(NumberInput.validate(state.number, Object.keys(state.types).filter(name => state.types[name]))))
      ])
    ]),
    h('.row', [
      h('label.small-6.columns', [
        'Expiration',
        ExpirationInput.render(state.expiration, renderStyle(ExpirationInput.validate(state.expiration)))
      ]),
      h('label.small-6.columns', [
        'Expiration',
        CvcInput.render(state.cvc, renderStyle(CvcInput.validate(state.cvc, card.type(state.number.value))))
      ])
    ]),
    h('.row.small-12.columns', renderTypeControls(state)),
    h('.row.small-12.columns', [
      h('.callout', json.render({
        types: Object.keys(state.types).filter(type => state.types[type]),
        number: {
          value: state.number.value,
          type: {
            eager: card.type(state.number.value, true) || null,
            strict: card.type(state.number.value) || null
          },
          valid: NumberInput.validate(state.number)
        },
        expiration: {
          raw: state.expiration.raw,
          value: state.expiration.value,
          valid: ExpirationInput.validate(state.expiration)
        },
        cvc: {
          value: state.cvc.value,
          valid: CvcInput.validate(state.cvc, card.type(state.number.value))
        }
      }))
    ])
  ])
}

function renderTypeControls (state) {
  return h('fieldset.fieldset', [
    h('legend', 'Allowed card types'),
    Object.keys(state.types).map((type, index) => {
      var id = 'card-type-' + index
      var checked = state.types[type]
      return h('.medium-6.columns', [
        h('input', {
          id: id,
          name: id,
          type: 'checkbox',
          checked: state.types[type],
          'ev-event': changeEvent(state.channels.setType, {
            name: type,
            value: !checked
          })
        }),
        h('label', {attributes: {for: id}}, type)
      ])
    })
  ])
}

function Types (types) {
  var data = Object.keys(types.types)
    .map(type => types.types[type])
    .filter(type => type instanceof types.Type)
    .reduce((acc, type) => {
      acc[type.name] = Observ(true)
      return acc
    }, {})

  return State(data)
}

function renderStyle (valid) {
  return {
    style: {
      borderStyle: '1px solid',
      borderColor: valid ? 'green' : 'red'
    }
  }
}

@@ -1112,15 +1112,32 @@
 ter(
-name =%3E
+function (name) %7B return
  sta
@@ -1150,16 +1150,18 @@
 es%5Bname%5D
+ %7D
 ))))%0A   
@@ -1718,24 +1718,34 @@
 ).filter
+(function 
 (type
- =%3E
+) %7B
  state.t
@@ -1754,16 +1754,18 @@
 es%5Btype%5D
+ %7D
 ),%0A     
@@ -2506,16 +2506,25 @@
 es).map(
+function 
 (type, i
@@ -2528,19 +2528,16 @@
 , index)
- =%3E
  %7B%0A     
@@ -3051,23 +3051,40 @@
    .map(
-type =%3E
+function (type) %7B return
  types.t
@@ -3093,16 +3093,18 @@
 es%5Btype%5D
+ %7D
 )%0A    .f
@@ -3113,15 +3113,32 @@
 ter(
-type =%3E
+function (type) %7B return
  typ
@@ -3160,16 +3160,18 @@
 pes.Type
+ %7D
 )%0A    .r
@@ -3176,16 +3176,25 @@
 .reduce(
+function 
 (acc, ty
@@ -3200,11 +3200,8 @@
 ype)
- =%3E
  %7B%0A 

Remove arrow fns from example