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

let colorMap = React.createFactory(require("./color/map"))
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"))

  state = { showPopup: false }

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

  _setHex(hex) {
    hex = hex.replace(/[^\w\s]/gi, '')
    if(hex.length !== 3 && hex.length !== 6) return false

    let color = Colr.fromHex(hex)
    this.setState({
      color: color,
      hsv: color.toRawHsvObject(),
    })
  }

  _displayColor(){
    if (this.state.showPopup === false) return false
    return div({className: "controls colorpicker"},
      div({ className: "hue-slider" },
        hue_slider({
          max: 360,
          valueLink: this.props.valueLink,
        })
      ),
      colorMap({
        max: 100,
        valueLink: this.props.valueLink,
      })
    )
  }

  _getContrastYIQ(){
    let hexColor = this.props.valueLink.value || "000000"

    if (this.refs.colorText === undefined
      || this.props.valueLink.value.length === 0) return hexColor

    hexColor = hexColor.replace(/[^\w\s]/gi, '')

    let colorLen = hexColor.length
    let currentTextColor = this.refs.colorText.props.style.color

    if (colorLen !== 3 && colorLen !== 6) return currentTextColor
    if (colorLen === 3) hexColor = hexColor.concat(hexColor)

    let r = parseInt(hexColor.substr(0,2),16)
    let g = parseInt(hexColor.substr(2,2),16)
    let b = parseInt(hexColor.substr(4,2),16)
    let yiq = ((r*299)+(g*587)+(b*114))/1000

    return (yiq >= 128) ? 'black' : 'white'
  }

  _changeBackgroundColor(){
    let newBGColor = this.props.valueLink.value || "FFF"
    if (this.refs.colorText === undefined) return newBGColor

    let currentBG = this.refs.colorText.props.style.backgroundColor
    newBGColor = newBGColor.replace(/[^\w\s]/gi, '')

    let bgColorLen = newBGColor.length

    return bgColorLen === 3 || bgColorLen === 6 ? `#${newBGColor}` : currentBG
  }

  render() {
    return div({className: cx(sizeClassNames(this.props))},
      div({className: formGroupCx(this.props)},
        label(this.props),
        input(Object.assign({}, this.props.inputHtml, {
            valueLink: this.props.valueLink,
            ref: "colorText",
            className: cx(this.props.inputHtml.className, "form-control"),
            onClick: this._onInputClick.bind(this),
            style: {
               backgroundColor: this._changeBackgroundColor(),
               color: this._getContrastYIQ(),
            },
          }),
        ),
        this._displayColor(),
        errorList(this.props.errors),
      )
    )
  }

}

@@ -1229,24 +1229,37 @@
 trastYIQ()%7B%0A
+%3C%3C%3C%3C%3C%3C%3C HEAD%0A
     let hexC
@@ -1303,16 +1303,146 @@
 %22000000%22
+%0A=======%0A    let %5B, hexColor, colorLen%5D = getHSV(this.props, %22#000%22)%0A%3E%3E%3E%3E%3E%3E%3E 07710c8... Remove Duplicated Functionality From Color
 %0A%0A    if
@@ -1548,93 +1548,8 @@
 or%0A%0A
-    hexColor = hexColor.replace(/%5B%5E%5Cw%5Cs%5D/gi, '')%0A%0A    let colorLen = hexColor.length%0A
     
@@ -1952,30 +1952,41 @@
 ) ? 
-'black' : 'white'%0A  %7D%0A
+%22#000%22 : %22#FFF%22%0A  %7D%0A%0A%3C%3C%3C%3C%3C%3C%3C HEAD
 %0A  _
@@ -2067,16 +2067,171 @@
 %7C %22FFF%22%0A
+=======%0A  _changeBackgroundColor() %7B%0A    let %5B, newBGColor, bgColorLen%5D = getHSV(this.props)%0A%3E%3E%3E%3E%3E%3E%3E 07710c8... Remove Duplicated Functionality From Color%0A
     if (
@@ -2355,101 +2355,8 @@
 olor
-%0A    newBGColor = newBGColor.replace(/%5B%5E%5Cw%5Cs%5D/gi, '')%0A%0A    let bgColorLen = newBGColor.length
 %0A%0A  

Remove Duplicated Functionality From Color