var React                                    = require("react")
var cx                                       = require("classnames")

var {errorList, sizeClassNames, formGroupCx} = require("../util.js")

var {div, span, label, input}                = React.DOM

export default class extends React.Component {

  static displayName = "Frig.friggingBootstrap.Switch"

  static defaultProps = Object.assign(require("../default_props.js"), {
    onColor:  "primary",
    onText:   "ON",
    offColor: "default",
    offText:  "OFF",
    size:     "normal",
  })

  constructor(props) {
    super(props)

    this.state = {
      errors: undefined,
      checked: true,
    }
  }

  isChecked() {
    return this.state.checked
  }

  _inputHtml() {
    return div({
        className: `bootstrap-switch-container`,
        ref: "switchContainer",
        onClick: this._onClick.bind(this),
      },
      span({className: `bootstrap-switch-handle-on bootstrap-switch-${this.props.onColor}`}, this.props.onText),
      span({className: `bootstrap-switch-label`}, "\u00a0"),
      span({className: `bootstrap-switch-handle-off bootstrap-switch-${this.props.offColor}`}, this.props.offText),
    )
  }

  _onClick() {
    React.findDOMNode(this.refs.switchContainer).style.marginLeft = (this.state.checked === true) ? "-50px" : "0"
    this.setState({ checked: !this.state.checked })
  }

  _labelContainerCx() {
    return cx({
      "pull-left": this.props.layout === "horizontal",
    })
  }

  _inputContainerCx() {
    return cx({
      "pull-right": this.props.layout === "horizontal",
      "controls": this.props.layout === "vertical",
    })
  }

  _label() {
    if (this.props.label === null) return ""
    return label(this.props.labelHtml, this.props.label)
  }

  _errorList() {
    if (this.state.errors === null) return ""
    return errorList(this.state.errors)
  }

  render() {
    return div({className: cx(sizeClassNames(this.props))},
      div({className: this._labelContainerCx()},
        this._label(),
      ),
      div({className: this._inputContainerCx()},
        div({className: `bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-id-switch-state bootstrap-switch-animate bootstrap-switch-${this.props.size}`},
          this._inputHtml(),
          this._errorList(),
        )
      )
    )
  }

}

@@ -658,16 +658,232 @@
 : true,%0A
+      bootstrapSwitchClasses: %5B%0A        %22bootstrap-switch%22,%0A        %22bootstrap-switch-wrapper%22,%0A        %22bootstrap-switch-on%22,%0A        %22bootstrap-switch-id-switch-state%22,%0A        %22bootstrap-switch-animate%22,%0A      %5D,%0A
     %7D%0A  
@@ -2316,104 +2316,19 @@
 me: 
-%60bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-id-switch-
+this.
 state
- 
+.
 boot
@@ -2336,60 +2336,31 @@
 trap
--s
+S
 witch
--animate bootstrap-switch-$%7Bthis.props.size%7D%60
+Classes.join(%22 %22)
 %7D,%0A 

Add BootstrapSwitchClasses State To Switch