var _excluded = ["value", "min", "max", "step", "disabled", "inputAttribute", "tooltipAttribute", "onChange"];

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { forwardRef, useEffect } from 'react';
import Instance from './instance';
var InputRange = forwardRef(function (_ref, ref) {
  var _ref$value = _ref.value,
      value = _ref$value === void 0 ? 0 : _ref$value,
      _ref$min = _ref.min,
      min = _ref$min === void 0 ? 0 : _ref$min,
      _ref$max = _ref.max,
      max = _ref$max === void 0 ? 100 : _ref$max,
      _ref$step = _ref.step,
      step = _ref$step === void 0 ? 1 : _ref$step,
      disabled = _ref.disabled,
      _ref$inputAttribute = _ref.inputAttribute,
      inputAttribute = _ref$inputAttribute === void 0 ? {} : _ref$inputAttribute,
      _ref$tooltipAttribute = _ref.tooltipAttribute,
      tooltipAttribute = _ref$tooltipAttribute === void 0 ? {} : _ref$tooltipAttribute,
      onChange = _ref.onChange,
      others = _objectWithoutPropertiesLoose(_ref, _excluded);

  var rootRef = useRef(null);
  var inputRef = useRef(null);
  var tooltipRef = useRef(null);
  useImperativeHandle(ref, function () {
    return rootRef.current;
  });
  useEffect(function () {
    if (rootRef.current) {
      rootRef.current.instance = new Instance(rootRef.current, {
        onChange: handleChange(e)
      });
    }
  }, []); // eslint-disable-line

  function handleChange(e) {
    if (onChange) {
      onChange(e, inputRef.current.value);
    }
  }

  return /*#__PURE__*/React.createElement("div", _extends({
    ref: rootRef
  }, others, {
    className: "range" + (others.className ? ' ' + others.className : '')
  }), /*#__PURE__*/React.createElement("input", _extends({
    ref: inputRef
  }, inputAttribute, {
    disabled: disabled,
    type: "range",
    className: "range-input" + (inputAttribute.className ? ' ' + inputAttribute.className : ''),
    min: min,
    max: max,
    step: step,
    defaultValue: value
  })), /*#__PURE__*/React.createElement("div", _extends({
    ref: tooltipRef
  }, tooltipAttribute, {
    className: "range-tooltip" + (tooltipAttribute.className ? ' ' + tooltipAttribute.className : '')
  }), value));
});
export default InputRange;