let React = require("react")
let Colr = require('colr')
let {errorList, sizeClassNames, formGroupCx, label} = require("../util.js")
let {div, input, img} = React.DOM
let cx = require("classnames")

let colorMap = React.createFactory(require("./color/map"))
let sample =  React.createFactory(require("./color/sample"))
let hue_slider =  React.createFactory(require("./color/hue_slider"))

export default class extends React.Component {

  static displayName = "Frig.friggingBootstrap.Color"

  static defaultProps = Object.assign(require("../default_props.js"), {
    color: "#000000",
  })

  propTypes: {
    color: React.PropTypes.string,
  }

  state = this._getStateFrom(this.props.color)

  componentDidMount() {
   this.setState({ showPopup: false })
  }

  // compare props against state using hex strings
  // only use the new props if the color is different
  // this prevents data loss when converting between RGB and HSV
  componentWillReceiveProps(nextProps) {
    let nextColor = nextProps.color.toLowerCase()
    let currentColor = Colr.fromHsvObject(this.state.hsv).toHex()

    if(nextColor !== currentColor) {
      this.setState(this._getStateFrom(nextProps.color))
    }
  }

  // generate state object from a hex string
  _getStateFrom(color) {
    color = Colr.fromHex(color)
    return {
      color: color,
      hsv: color.toRawHsvObject(),
    }
  }

  _onInputClick() {
    this.setState({
      showPopup: !this.state.showPopup,
    })
  }

  // replace current color with another one
  _loadColor(color) {
    this.setState(this._getStateFrom(color))
    this.props.onChange(Colr.fromHex(color))
  }

  // update the current color using the raw hsv values
  _update() {
    let color = Colr.fromHsvObject(this.state.hsv)
    this.setState({ color: color })
  }

  // set the hue
  _setHue(hue) {
    this.state.hsv.h = hue
    this._update()
  }

  // set the saturation
  _setSaturation(saturation) {
    this.state.hsv.s = saturation
    this._update()
  }

  // set the value
  _setValue(value) {
    this.state.hsv.v = value
    this._update()
  }

  // set the saturation and the value
  _setSaturationAndValue(saturation, value) {
    this.state.hsv.s = saturation
    this.state.hsv.v = value
    this._update()
  }

  _getBackgroundHue() {
    return Colr.fromHsv(this.state.hsv.h, 100, 100).toHex()
  }

  _inputMap() {
    let hue = this._getBackgroundHue()
    let luminosity = this.state.color.toGrayscale()

    return colorMap({
      x: this.state.hsv.s,
      y: this.state.hsv.v,
      max: 100,
      backgroundColor: hue,
      className: cx({
        dark: luminosity <= 128,
        light: luminosity > 128,
      }),
      onChange: this._setSaturationAndValue.bind(this),
    })
  }

  _displayColorMap(){
    if (this.state.showPopup === false) return false
    return div({className: "controls colorpicker"},
      div({ className: "hue-slider" },
        hue_slider({
          value: this.state.hsv.h,
          max: 360,
          onChange: this._setHue.bind(this),
        })
      ),
      this._inputMap(),
    )
  }


  render() {
    return div({className: cx(sizeClassNames(this.props))},
      div({className: formGroupCx(this.props)},
        label(this.props),
        div({className: "row"},
          input(Object.assign({}, this.props.inputHtml, {
              valueLink: {
                value: Colr.fromHsvObject(this.state.hsv).toHex(),
                requestChange: this._update.bind(this),
              },
              disabled: true,
			  onClick: this._onInputClick.bind(this),
              style: {
                 backgroundColor: Colr.fromHsvObject(this.state.hsv).toHex(),
              },
            }),
          )
        ),
      this._displayColorMap(),
      errorList(this.props.errors),
      )
    )
  }

}

@@ -3223,42 +3223,8 @@
 s),%0A
-        div(%7BclassName: %22row%22%7D,%0A  
     
@@ -3283,26 +3283,24 @@
             
-  
 valueLink: %7B
@@ -3296,26 +3296,24 @@
 alueLink: %7B%0A
-  
             
@@ -3379,18 +3379,16 @@
         
-  
 requestC
@@ -3423,39 +3423,110 @@
 s),%0A            
-  
 %7D,%0A  
+          className: cx(this.props.inputHtml.className, %22form-control%22),%0A
             disa
@@ -3541,11 +3541,18 @@
 ue,%0A
-%09%09%09
+          
   on
@@ -3601,18 +3601,16 @@
         
-  
 style: %7B
@@ -3606,26 +3606,24 @@
    style: %7B%0A
-  
             
@@ -3690,39 +3690,35 @@
 (),%0A            
-  
 %7D,%0A
-  
           %7D),%0A  
@@ -3727,23 +3727,13 @@
     
-  
 )
+,
 %0A  
-      ),%0A
     
@@ -3755,24 +3755,26 @@
 ColorMap(),%0A
+  
       errorL

Fix Styling With Color Textbox As Spacing Is Off