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",
    disabled: false,
  })

  constructor(props) {
    super(props)

    this.state = {
      errors: undefined,
      checked: true,
      bootstrapSwitchClasses: [
        "bootstrap-switch",
        "bootstrap-switch-wrapper",
        "bootstrap-switch-on",
        "bootstrap-switch-id-switch-state",
        "bootstrap-switch-animate",
      ],
      bootstrapSwitchOnClassess: ["bootstrap-switch-handle-on"],
      bootstrapSwitchOffClassess: ["bootstrap-switch-handle-off"],
    }
  }

  componentWillMount() {
    if (this.props.size !== undefined && this.props.size !== null) {
      this.setState({
        bootstrapSwitchClasses: this.state.bootstrapSwitchClasses.concat([
          `bootstrap-switch-${this.props.size}`,
        ]),
      })
    }

    if (this.props.onColor !== undefined && this.props.onColor !== null) {
      this.setState({
        bootstrapSwitchOnClassess: this.state.bootstrapSwitchOnClassess.concat([
          `bootstrap-switch-${this.props.onColor}`,
        ]),
      })
    }

    if (this.props.offColor !== undefined && this.props.offColor !== null) {
      this.setState({
        bootstrapSwitchOffClassess: this.state.bootstrapSwitchOffClassess.concat([
          `bootstrap-switch-${this.props.offColor}`,
        ]),
      })
    }
    
    if (this.props.disabled === true) {
      this.setState({
        bootstrapSwitchClasses: this.state.bootstrapSwitchClasses.concat([
          "bootstrap-switch-disabled",
        ]),
      })
    }
  }

  isChecked() {
    return this.state.checked
  }

  _inputHtml() {
    return div({
        className: `bootstrap-switch-container`,
        ref: "switchContainer",
        onClick: this._onClick.bind(this),
      },
      span({ 
          className: this.state.bootstrapSwitchOnClassess.join(" "),
        }, 
        this.props.onText
      ),
      span({ className: `bootstrap-switch-label` }, "\u00a0"),
      span({ 
          className: this.state.bootstrapSwitchOffClassess.join(" "), 
        }, 
        this.props.offText
      ),
    )
  }

  _onClick() {
    if (this.props.disabled === false) {
      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: this.state.bootstrapSwitchClasses.join(" ")},
          this._inputHtml(),
          this._errorList(),
        )
      )
    )
  }

}

@@ -1071,103 +1071,42 @@
     
-if (this.props.size !== undefined && this.props.size !== null) %7B%0A      
+let switchClasses = cx(
 this.s
-etS
 tate
-(%7B%0A        
+.
 boot
@@ -1119,37 +1119,36 @@
 witchClasses
-: this.state.
+, %7B%0A      %5B%60
 bootstrapSwi
@@ -1148,42 +1148,70 @@
 trap
-S
+-s
 witch
-Classes.concat(%5B%0A    
+-$%7Bthis.props.size%7D%60%5D: this.props.size != null,%0A
       
-%60
+%22
 boot
@@ -1227,55 +1227,119 @@
 tch-
-$%7Bthis.props.size%7D%60,%0A        %5D),%0A      %7D)
+disabled%22: this.props.disabled,%0A    %7D)%0A%0A    this.setState(%7B%0A      bootstrapSwitchClasses: switchClasses,
 %0A    %7D
+)
 %0A%0A  
@@ -1860,216 +1860,8 @@
   %7D%0A
-    %0A    if (this.props.disabled === true) %7B%0A      this.setState(%7B%0A        bootstrapSwitchClasses: this.state.bootstrapSwitchClasses.concat(%5B%0A          %22bootstrap-switch-disabled%22,%0A        %5D),%0A      %7D)%0A    %7D%0A
   %7D%0A
@@ -3408,26 +3408,16 @@
 hClasses
-.join(%22 %22)
 %7D,%0A     

Use CX To Merge Size & Disable In Switch Component