'use babel'
/** @jsx etch.dom */

import etch from 'etch'
import stateless from 'etch-stateless'

const IndicatorAnchor = stateless(etch, ({wrapped}) => {
  let light = ''
  if (wrapped) {
    light = 'lit'
  } else {
    light = 'unlit'
  }

  return <a className={`status-${light}`} href="#">Wrap</a>
})

export default class SoftWrapStatusComponent {
  constructor () {
    this.visible = true
    this.softWrapped = false

    etch.initialize(this)
  }

  render () {
    return (
      <div className="soft-wrap-status-component inline-block">
        {this.renderIndicator()}
      </div>
    )
  }

  renderIndicator () {
    if (this.visible) {
      return <IndicatorAnchor wrapped={this.softWrapped} />
    }
  }

  update ({visible, softWrapped}) {
    this.visible = visible
    this.softWrapped = softWrapped

    return etch.update(this)
  }

  destroy () {
    etch.destroy(this)
  }
}

@@ -133,16 +133,25 @@
 etch, (%7B
+onclick, 
 wrapped%7D
@@ -286,16 +286,34 @@
 light%7D%60%7D
+ onclick=%7Bonclick%7D
  href=%22#
@@ -707,43 +707,172 @@
 hor 
-wrapped=%7Bthis.softWrapped%7D /%3E%0A    %7D
+onclick=%7Bthis.toggleSoftWrap.bind(this)%7D wrapped=%7Bthis.softWrapped%7D /%3E%0A    %7D%0A  %7D%0A%0A  toggleSoftWrap () %7B%0A    atom.workspace.getActiveTextEditor().toggleSoftWrapped()
 %0A  %7D

Add onclick handler to toggle soft wrap