import React from 'react'
const el = React.createElement
import { observer } from 'mobservable-react'
import { observable} from 'mobservable'
import Command from '../reactiveCollection/Command'

import Input from 'react-bootstrap/lib/Input'
import Button from 'react-bootstrap/lib/Button'

var fromValue = value => value ? '$true' : '$false'
var fromEvent = ev => ev.target.value === '$true' ? true : false

export var input = function({value, onChange}) {
  return el(Input, {
    key: 'input',
    type: 'select',
    value: fromValue(value),
    onChange: ev => onChange(fromEvent(ev)),
  },
    el('option', {value: '$true'}, "oui"),
    el('option', {value: '$false'}, "non")
  )
}

export default function (collections, collectionId, itemId, fieldArg) {
  var fieldId = fieldArg.path
  var model = collections[collectionId].model
  var $inputValue = observable(null)
  var $editing = observable(false)
  var save = new Command(() => {
    return model.patch(itemId, {[fieldId]: $inputValue()}).then($editing.bind(null, false))
  })

  return observer(function () {
    var editing = $editing()
    var value = editing ?
      $inputValue() :
      normalizeValue(model.get(itemId).value[fieldId])
    return el('div', null,
      el(Input, {
        key: 'input',
        type: 'select',
        value: value,
        onChange: ev => {
          if (!editing) $editing(true)
          $inputValue(normalizeEvent(ev))
        },
      },
        el('option', {value: '$true'}, "oui"),
        el('option', {value: '$false'}, "non")
      ),
      editing || save.status() !== 'idle' ?
        el(Button, {
          key: 'save',
          onClick: save.trigger,
          disabled: save.status() !== 'idle',
        }, save.status() === 'idle' ? 'enregistrer' : save.status('fr')):
        null,
      editing ? el(Button, {key: 'cancel', onClick: $editing.bind(null, false)}, "Annuler") : null
    )
  })
}


function normalizeValue(value) {
  return value ? '$true' : '$false'
}

function normalizeEvent(ev) {
  return ev.target.value === '$true' ? true : false
}

@@ -1,12 +1,41 @@
+import get from 'lodash/get'%0A
 import React
@@ -1138,16 +1138,31 @@
 value = 
+normalizeValue(
 editing 
@@ -1191,30 +1191,19 @@
 :%0A      
-normalizeValue
+get
 (model.g
@@ -1218,25 +1218,31 @@
 d).value
-%5B
+, 
 fieldId
-%5D
+)%0A    
 )%0A    re

fix itemfieldBoolean that was not displaying 'false' in edit mode