/**
 * Handle of range component.
 * @class ApRangeHandle
 */
'use strict'

import React, {PropTypes as types} from 'react'
import classnames from 'classnames'
import {ApDraggable} from 'apeman-react-draggable'

/** @lends ApRangeHandle */
const ApRangeHandle = React.createClass({

  // --------------------
  // Specs
  // --------------------

  propTypes: {
    /** Handle for move */
    onMove: types.func,
    shouldMove: types.func,
    x: types.number,
    minX: types.number,
    maxX: types.number
  },

  render () {
    const s = this
    let  { props } = s
    return (
      <ApDraggable onMove={ props.onMove }
                   shouldMove={ props.shouldMove }
                   x={ props.x }
                   minX={ props.minX }
                   maxX={ props.maxX }
                   className={ classnames('ap-range-handle', props.className) }
                   direction="HORIZONTAL">
        <div>
          <div className="ap-range-handle-area"></div>
          <div className="ap-range-handle-icon">
          </div>
        </div>
      </ApDraggable>
    )
  }
})

export default ApRangeHandle