'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

require('./style.scss');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _throttle = require('lodash/throttle');

var _throttle2 = _interopRequireDefault(_throttle);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

/* istanbul ignore next */
var nearest10s = function nearest10s(num) {
  var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
  return Math.round(num / base) * base;
};

var defaultOpts = {
  showMarks: false,
  showLabels: undefined,
  roundLabels: undefined,
  limit: {
    lower: undefined,
    upper: undefined
  }
};

var Range = function Range(_ref) {
  var list = _ref.list,
      max = _ref.max,
      min = _ref.min,
      options = _ref.options,
      step = _ref.step,
      defaultValue = _ref.defaultValue,
      props = _objectWithoutProperties(_ref, ['list', 'max', 'min', 'options', 'step', 'defaultValue']);

  var opts = _extends({}, defaultOpts, options);

  var ROOT = _react2.default.createRef();
  var INPUT = _react2.default.createRef();

  /* istanbul ignore next */
  var updateLabel = function updateLabel(num) {
    if (opts.showLabels === false) return '';
    if (opts.roundLabels === false) return num;

    var label = void 0;
    var datalist = INPUT.current.list;

    if (datalist) {
      var selector = 'option[value="' + num + '"]';
      var option = datalist.querySelector(selector);
      if (!option) {
        var rounded = nearest10s(num, opts.roundLabels || step);
        selector = 'option[value="' + rounded + '"]';
        option = datalist.querySelector(selector);
      }
      label = option && (option.label || num) || (!opts.showLabels ? '' : num);
      if ('updateInfo' in props) props.updateInfo(option); // TODO: change callback to [updateLabels]
    } else {
      label = num;
      if ('updateInfo' in props) props.updateInfo(label); // TODO: change callback to [updateLabels]
    }

    return label;
  };

  /* istanbul ignore next */
  var handleChange = (0, _throttle2.default)(function (e) {
    var target = e.target;


    var val = target.value;
    var out = ROOT.current.querySelector('output');
    var wrap = ROOT.current.closest('.Range');

    out.value = updateLabel(val);
    wrap.style.setProperty('--range-val', val);

    return val;
  }, 88);

  (0, _react.useEffect)(function () {
    var event = new Event('input', { bubbles: true });
    var target = INPUT.current;
    target.dispatchEvent(event);
  });

  return _react2.default.createElement(
    'div',
    {
      ref: ROOT,
      className: 'Range ' + (opts.showMarks ? 'Range_marks' : /* istanbul ignore next */''),
      style: _extends({}, props.style, {
        '--range-min': min,
        '--range-max': max,
        /* istanbul ignore next */
        '--range-marks': typeof opts.showMarks === 'number' ? opts.showMarks : step,
        '--range-val': defaultValue
      })
    },
    _react2.default.createElement('div', { className: 'Range-progress' }),
    _react2.default.createElement('input', {
      ref: INPUT,
      className: 'Range-input',
      defaultValue: defaultValue,
      list: list,
      max: max,
      min: min,
      onInput: function onInput(e) {
        if (opts.limit.lower && e.target.value < opts.limit.lower) {
          INPUT.current.value = opts.limit.lower;
        }
        e.persist();
        return handleChange(e);
      },
      step: step,
      style: { width: '100%' },
      type: 'range'
    }),
    _react2.default.createElement(
      'output',
      { className: 'Range-output', htmlFor: 'TEST' },
      opts.showLabels && defaultValue
    ),
    props.children
  );
};
Range.propTypes = process.env.NODE_ENV !== "production" ? {
  defaultValue: _propTypes2.default.number,
  id: _propTypes2.default.string,
  list: _propTypes2.default.string,
  max: _propTypes2.default.number,
  min: _propTypes2.default.number,
  options: _propTypes2.default.shape({
    limit: _propTypes2.default.shape({ lower: _propTypes2.default.number, upper: _propTypes2.default.number }),
    roundLabels: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.bool]),
    showLabels: _propTypes2.default.bool,
    showMarks: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.number])
  }),
  step: _propTypes2.default.number,
  style: _propTypes2.default.object,
  updateInfo: _propTypes2.default.func
} : {};
Range.defaultProps = {
  defaultValue: 12,
  list: '',
  max: 10,
  min: 0,
  options: {
    showLabels: undefined,
    showMarks: false
  },
  step: 1
};

exports.default = Range;
module.exports = exports['default'];