'use strict';

exports.__esModule = true;

var _isInteger = require('babel-runtime/core-js/number/is-integer');

var _isInteger2 = _interopRequireDefault(_isInteger);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _SliderPointer = require('./SliderPointer');

var _SliderPointer2 = _interopRequireDefault(_SliderPointer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Slider = function (_React$Component) {
  (0, _inherits3.default)(Slider, _React$Component);

  function Slider() {
    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Slider);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
      sliderLow: _this.props.value.low || _this.props.min,
      sliderHigh: _this.props.value.high || _this.props.value,
      scale: [_this.props.min, _this.props.max],
      selectionWidth: null
    }, _this.setScalePos = function (scale, min, max) {
      _this.ticksContainer && _this.ticksContainer.childNodes.forEach(function (child, idx) {
        var leftValue = (scale[idx] - min) / max * 100 + '%';
        child.style.left = 'calc(' + leftValue + ' - ' + child.offsetWidth / 2 + 'px)';
      });
    }, _this.getScale = function () {
      var low = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
      var high = arguments[1];
      var tick = arguments[2];

      var value = high;
      var ticksArray = [high];

      while (value > 0 && value - tick >= low) {
        value -= tick;

        ticksArray.unshift(Math.abs(Math.round(value / tick) * tick));
      }

      _this.setState({ scale: ticksArray });
    }, _this.getSliderWidth = function () {
      return _this.sliderBar.getBoundingClientRect().width;
    }, _this.getStepWidth = function () {
      var maxValue = _this.props.max - _this.props.min;
      var maxWidth = _this.getSliderWidth();

      return _this.props.step / maxValue * maxWidth;
    }, _this.getSteps = function (position) {
      if (position.isKeyBoard) return 1;
      var diff = position.direction === 1 ? position.to - position.from : position.from - position.to;
      if (diff < 0) return 0;
      var steps = diff / _this.getStepWidth();
      return steps - Math.floor(steps) >= 0.5 ? Math.ceil(steps) : Math.floor(steps);
    }, _this.getLimit = function (pointerKey, direction) {
      if (pointerKey === 'sliderLow') {
        return _this.props.canCross ? direction === 1 ? _this.props.max : _this.props.min : direction === 1 ? _this.state.sliderHigh : _this.props.min;
      } else if (pointerKey === 'sliderHigh') {
        return _this.props.canCross ? direction === 1 ? _this.props.max : _this.props.min : direction === 1 ? _this.props.max : _this.state.sliderLow;
      }
    }, _this.returnCurrentValues = function () {
      _this.getSelectionWidth();

      if (_this.props.onChange) {
        return _this.props.onChange((0, _typeof3.default)(_this.props.value) === 'object' ? {
          low: Math.min(_this.state.sliderHigh, _this.state.sliderLow),
          high: Math.max(_this.state.sliderHigh, _this.state.sliderLow)
        } : _this.state.sliderHigh);
      }
    }, _this.moveForward = function (key, pixelMove, limit) {
      var _this$setState;

      var newPosition = _this.state[key] + pixelMove <= limit ? _this.state[key] + pixelMove : limit;

      _this.setState((_this$setState = {}, _this$setState[key] = newPosition, _this$setState), function () {
        return _this.returnCurrentValues();
      });
    }, _this.moveBack = function (key, pixelMove, limit) {
      var _this$setState2;

      var newPosition = _this.state[key] - pixelMove >= limit ? _this.state[key] - pixelMove : limit;

      _this.setState((_this$setState2 = {}, _this$setState2[key] = newPosition, _this$setState2), function () {
        return _this.returnCurrentValues();
      });
    }, _this.onSliderMove = function (key, position) {
      if (_this.props.disabled) return;
      var limit = _this.getLimit(key, position.direction);
      var pixelMove = _this.getSteps(position) * _this.props.step;

      position.direction === 1 ? _this.moveForward(key, pixelMove, limit) : _this.moveBack(key, pixelMove, limit);
    }, _this.getSelectionWidth = function () {
      var baseValue = (0, _isInteger2.default)(_this.state.sliderLow) ? _this.state.sliderLow : _this.props.min;

      _this.setState({
        selectionWidth: {
          width: Math.abs(_this.state.sliderHigh - baseValue) / _this.props.max * 100 + '%',
          left: (Math.min(baseValue, _this.state.sliderHigh) - _this.props.min) / _this.props.max * 100 + '%'
        }
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  Slider.prototype.componentWillMount = function componentWillMount() {
    var _props = this.props,
        min = _props.min,
        max = _props.max,
        tick = _props.tick;


    tick && this.getScale(min, max, tick);
    this.getSelectionWidth();
  };

  Slider.prototype.componentDidMount = function componentDidMount() {
    var _props2 = this.props,
        min = _props2.min,
        max = _props2.max;
    var scale = this.state.scale;

    this.setScalePos(scale, min, max);
  };

  Slider.prototype.render = function render() {
    var _this2 = this;

    var _props3 = this.props,
        value = _props3.value,
        disabled = _props3.disabled,
        className = _props3.className,
        max = _props3.max,
        min = _props3.min,
        translateFn = _props3.translateFn;
    var _state = this.state,
        sliderHigh = _state.sliderHigh,
        sliderLow = _state.sliderLow,
        scale = _state.scale,
        selectionWidth = _state.selectionWidth;


    var renderTicks = function renderTicks() {
      var ticks = scale.map(function (tickValue, idx) {
        var tickLabel = translateFn ? translateFn(tickValue) : tickValue;
        return _react2.default.createElement(
          'span',
          { key: 'tick-' + idx, className: 'cui-slider__hashlabel' },
          tickLabel
        );
      });
      return _react2.default.createElement(
        'div',
        { ref: function ref(_ref) {
            return _this2.ticksContainer = _ref;
          } },
        ticks
      );
    };

    return _react2.default.createElement(
      'div',
      { className: 'cui-slider ' + className + ('' + (disabled && ' cui-slider--disabled' || '')) + ('' + (className && ' ' + className || ''))
      },
      _react2.default.createElement('span', { className: 'cui-slider__bar', ref: function ref(_ref2) {
          return _this2.sliderBar = _ref2;
        } }),
      _react2.default.createElement('span', { className: 'cui-slider__selection', style: selectionWidth }),
      (0, _isInteger2.default)(value.low) && _react2.default.createElement(_SliderPointer2.default, {
        position: (sliderLow - min) / (max - min) * 100,
        onMove: function onMove(b) {
          return _this2.onSliderMove('sliderLow', b);
        },
        ref: function ref(_ref3) {
          return _this2.sliderLow = _ref3;
        }
      }),
      _react2.default.createElement(_SliderPointer2.default, {
        position: (sliderHigh - min) / (max - min) * 100,
        onMove: function onMove(b) {
          return _this2.onSliderMove('sliderHigh', b);
        },
        ref: function ref(_ref4) {
          return _this2.sliderHigh = _ref4;
        }
      }),
      renderTicks()
    );
  };

  return Slider;
}(_react2.default.Component); /**
                               * @category controls
                               * @component slider
                               * @variations collab-ui-react
                               */

Slider.displayName = 'Slider';
exports.default = Slider;


Slider.defaultProps = {
  className: '',
  canCross: false,
  disabled: false,
  min: 0,
  onChange: null,
  step: 1,
  tick: 0,
  translateFn: null,
  value: 0
};

/**
* @name Default Slider
* @description Sliders with range mentioned.
*
* @category controls
* @component slider
* @section default
*
* @js

export default class DefaultSlider extends React.Component {
  state = {
    slider1: {low: 100, high: 200},
    slider2: {low: 100, high: 200}
  }
  render() {
    return (
      <span>
        <div className="row" key='child-0'>
          <div>Low: {this.state.slider1.low} High: {this.state.slider1.high}</div>
          <Slider
            min={0}
            max={500}
            tick={100}
            value={this.state.slider1}
            step={1}
            onChange={value => this.setState({ slider1: value })}
          />
        </div>
        <br key='child-1'/>
        <div className="row" key='child-2'>
          <div>Low: {this.state.slider2.low} High: {this.state.slider2.high} (canCross prop = true)</div>
          <Slider
            min={0}
            max={500}
            tick={100}
            value={this.state.slider2}
            step={1}
            canCross
            onChange={value => this.setState({slider2: value})}
          />
        </div>
      </span>
    );
  }
}
**/

/**
* @name Slider with one pointer
* @description Sliders with one pointer.
*
* @category controls
* @component slider
* @section single-pointer
*
* @js

export default class SliderOnePointer extends React.Component {
  render() {
    return (
      <Slider
        min={0}
        max={500}
        tick={100}
        value={200}
        step={1}
      />
    );
  }
}
**/

module.exports = exports['default'];