const ctxCmp = require("../reaks/ctx-level-helpers/component")
const defaults = require("lodash/defaults")
const hFlex = require("../reaks-layout/hFlex")
const svgIcon = require("reaks/svgIcon")
const label = require("../reaks/label").reaks
const margin = require("../reaks-layout/margin")
const align = require("../reaks/align").reaks
const seq = require("reaks/seq")
const swap = require("reaks/swap")
const clickable = require("../reaks/clickable").reaksWrapper
const defaultCheckedIcon = require("./icons/toggle/checkbox")
const defaultUncheckedIcon = require("./icons/toggle/checkboxOutline")
const colors = require("material-colors")

module.exports = ctxCmp(
  ({
    checkedIcon = defaultCheckedIcon,
    uncheckedIcon = defaultUncheckedIcon,
    uncheckedIconColor = colors.darkIcons.active,
    checkedIconColor = colors.teal[500],
    label: labelText,
    value,
    setValue,
  }) => {
    const checked = svgIcon(checkedIcon, {
      size: { h: 24 },
      color: checkedIconColor,
    })
    const unchecked = svgIcon(uncheckedIcon, {
      size: { h: 24 },
      color: uncheckedIconColor,
    })

    const checkbox = swap(() => (value() ? checked : unchecked))

    return clickable(() => {
      setValue(!value())
    }, labelText ? hFlex([[{ weight: null, align: "center" }, checkbox], seq([margin({ l: 8 }), label(labelText)])]) : align({ h: "center", v: "center" }, checkbox))
  },
  function(arg) {
    return [
      defaults({}, arg, {
        uncheckedIconColor: ctx => ctx.colors.primary,
        checkedIconColor: ctx => ctx.colors.secondary,
        value: ctx => ctx.value,
        setValue: ctx => ctx.setValue,
      }),
    ]
  }
)

@@ -1198,16 +1198,23 @@
 ble(
+%0A      
 () =%3E %7B%0A
     
@@ -1205,24 +1205,26 @@
     () =%3E %7B%0A
+  
       setVal
@@ -1240,18 +1240,26 @@
 ())%0A    
-%7D,
+  %7D,%0A     
  labelTe
@@ -1260,16 +1260,24 @@
 abelText
+%0A       
  ? hFlex
@@ -1281,25 +1281,9 @@
 lex(
-%5B%5B%7B weight: null,
+%7B
  ali
@@ -1302,18 +1302,54 @@
  %7D, 
-checkbox%5D,
+%5B%0A            %5B%22fixed%22, checkbox%5D,%0A           
  seq
@@ -1386,18 +1386,38 @@
 lText)%5D)
-%5D)
+,%0A          %5D)%0A       
  : align
@@ -1456,16 +1456,21 @@
 heckbox)
+%0A    
 )%0A  %7D,%0A 

Fix checkbox & label alignment