content: import React from 'react'
  import ReactDOM from 'react-dom'
  import Colr from 'colr'
  import cx from 'classnames'
  import draggable from './higher_order_components/draggable.js'
  import defaultProps from '../../default_props.js'
  
  @draggable({
    // See this for the below issue with eslint and higher order components - https://github.com/yannickcr/eslint-plugin-react/issues/322
    updateClientCoords({ clientX, clientY }) { // eslint-disable-line react/prop-types
      const rect = ReactDOM.findDOMNode(this).getBoundingClientRect()
      const x = (clientX - rect.left) / rect.width
      const y = (rect.bottom - clientY) / rect.height
      const saturation = this.getScaledValue(x)
      const value = this.getScaledValue(y)
      const colr = Colr.fromHsv(this.props.hsv.h, saturation, value)
  
      this.props.colrLink.requestChange(colr)
    },
  })
  export default class ColorMap extends React.Component {
    static displayName = 'ColorMap'
  
    static defaultProps = defaultProps
  
    static propTypes = {
      hsv: React.PropTypes.shape({
        h: React.PropTypes.number.isRequired,
        s: React.PropTypes.number.isRequired,
        v: React.PropTypes.number.isRequired,
      }).isRequired,
  
      colrLink: React.PropTypes.shape({
        value: React.PropTypes.object.isRequired,
        requestChange: React.PropTypes.func.isRequired,
      }).isRequired,
  
      startDragging: React.PropTypes.func.isRequired,
      getPercentageValue: React.PropTypes.func.isRequired,
    }
  
    render() {
      const x = this.props.hsv.s
      const y = this.props.hsv.v
      const hue = Colr.fromHsv(this.props.hsv.h, 100, 100).toHex()
      const luminosity = this.props.colrLink.value.toGrayscale()
  
      return (
        <div
          className={cx({
            'frigb-map': true,
            'frigb-dark': luminosity <= 128,
            'frigb-light': luminosity > 128,
          })}
          onMouseDown={this.props.startDragging}
          onTouchStart={this.props.startDragging}
        >
          <div
            className="frigb-background"
            style={{
              backgroundColor: hue,
            }}
          />
          <div
            className="frigb-pointer"
            style={{
              left: this.props.getPercentageValue(x),
              bottom: this.props.getPercentageValue(y),
            }}
          />
        </div>
      )
    }
  }
  