"use strict";

exports.__esModule = true;
exports.default = void 0;

require("core-js/modules/es6.number.constructor");

require("core-js/modules/es6.number.is-integer");

require("core-js/modules/web.dom.iterable");

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _SliderPointer = _interopRequireDefault(require("./SliderPointer"));

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

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var Slider =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Slider, _React$Component);

  function Slider() {
    var _this;

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

    _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 (low, high, tick) {
      if (low === void 0) {
        low = 0;
      }

      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(typeof _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 = Number.isInteger(_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 + "%"
        }
      });
    };

    return _this;
  }

  var _proto = Slider.prototype;

  _proto.componentWillMount = function componentWillMount() {
    var _this$props = this.props,
        min = _this$props.min,
        max = _this$props.max,
        tick = _this$props.tick;
    tick && this.getScale(min, max, tick);
    this.getSelectionWidth();
  };

  _proto.componentDidMount = function componentDidMount() {
    var _this$props2 = this.props,
        min = _this$props2.min,
        max = _this$props2.max;
    var scale = this.state.scale;
    this.setScalePos(scale, min, max);
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props3 = this.props,
        value = _this$props3.value,
        disabled = _this$props3.disabled,
        className = _this$props3.className,
        max = _this$props3.max,
        min = _this$props3.min,
        translateFn = _this$props3.translateFn;
    var _this$state = this.state,
        sliderHigh = _this$state.sliderHigh,
        sliderLow = _this$state.sliderLow,
        scale = _this$state.scale,
        selectionWidth = _this$state.selectionWidth;

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

    return _react.default.createElement("div", {
      className: "cui-slider " + className + ("" + (disabled && " cui-slider--disabled" || '')) + ("" + (className && " " + className || ''))
    }, _react.default.createElement("span", {
      className: "cui-slider__bar",
      ref: function ref(_ref2) {
        return _this2.sliderBar = _ref2;
      }
    }), _react.default.createElement("span", {
      className: "cui-slider__selection",
      style: selectionWidth
    }), Number.isInteger(value.low) && _react.default.createElement(_SliderPointer.default, {
      position: (sliderLow - min) / (max - min) * 100,
      onMove: function onMove(b) {
        return _this2.onSliderMove('sliderLow', b);
      },
      ref: function ref(_ref3) {
        return _this2.sliderLow = _ref3;
      }
    }), _react.default.createElement(_SliderPointer.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;
}(_react.default.Component);

Slider.propTypes = {
  /** @prop Determines if minimum pointer can cross over maximum pointer | false */
  canCross: _propTypes.default.bool,

  /** @prop Optional CSS class string | '' */
  className: _propTypes.default.string,

  /** @prop Set the attribute disabled to Slider | false */
  disabled: _propTypes.default.bool,

  /** @prop Set the initial maximum value */
  max: _propTypes.default.number.isRequired,

  /** @prop Set the initial minimum value | 0 */
  min: _propTypes.default.number,

  /** @prop Callback function invoked by user when change a pointer position | null */
  onChange: _propTypes.default.func,

  /** @prop Set visual step measurement | 1 */
  step: _propTypes.default.number,

  /** @prop Set increment of x-axis labels | 0 */
  tick: _propTypes.default.number,

  /** @prop Function to compute layout of Slider | null */
  translateFn: _propTypes.default.func,

  /** @prop Set either maximum pointer value or a combination of high and low pointer values | 0 */
  value: _propTypes.default.oneOfType([_propTypes.default.shape({
    high: _propTypes.default.number.isRequired,
    low: _propTypes.default.number.isRequired
  }), _propTypes.default.number])
};
Slider.defaultProps = {
  canCross: false,
  className: '',
  disabled: false,
  min: 0,
  onChange: null,
  step: 1,
  tick: 0,
  translateFn: null,
  value: 0
};
Slider.displayName = 'Slider';
var _default = Slider;
/**
* @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}
      />
    );
  }
}
**/

exports.default = _default;