var _excluded = ["value", "min", "max", "step", "readOnly", "disabled", "onChange"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
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, useRef, useImperativeHandle, useEffect } from 'react';
import getPercent from "./getPercent";
import showTooltip from "./showTooltip";
import hideTooltip from "./hideTooltip";

// 内库使用-start
import DOMUtil from "./../../../utils/DOMUtil";
// 内库使用-end

/* 测试使用-start
import { DOMUtil } from 'seedsui-react'
测试使用-end */

var Range = /*#__PURE__*/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,
    readOnly = _ref.readOnly,
    disabled = _ref.disabled,
    onChange = _ref.onChange,
    props = _objectWithoutProperties(_ref, _excluded);
  var rootRef = useRef(null);
  var tooltipRef = useRef(null);
  var handleRef = useRef(null);
  var railRef = useRef(null);
  useImperativeHandle(ref, function () {
    return {
      rootDOM: rootRef.current,
      getRootDOM: function getRootDOM() {
        return rootRef.current;
      }
    };
  });
  useEffect(function () {
    updateContainer();
    hideTooltip(tooltipRef.current);
    // eslint-disable-next-line
  }, []);
  function handleChange(e) {
    if (disabled || readOnly) return;
    var newValue = e.currentTarget.value;
    if (newValue) newValue = Number(newValue || 0);
    if (onChange) {
      onChange(newValue);
    }

    // 更新位置
    updateContainer(newValue);
  }

  // 显示tooltip
  function handleTouchStart() {
    updateContainer();
    showTooltip(tooltipRef.current);
  }
  function handleTouchEnd() {
    hideTooltip(tooltipRef.current);
  }
  function updateContainer(newValue) {
    var _ref2;
    var currentValue = (_ref2 = newValue !== null && newValue !== void 0 ? newValue : value) !== null && _ref2 !== void 0 ? _ref2 : 0;
    var percent = getPercent({
      min: min,
      max: max,
      value: currentValue
    });
    handleRef.current.style.left = "calc(".concat(percent, "% - 8px)");
    tooltipRef.current.style.left = "calc(".concat(percent, "% - 12px)");
    railRef.current.style.width = "".concat(percent, "%");
    tooltipRef.current.innerHTML = currentValue;
  }
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: DOMUtil.classNames('input-range', props === null || props === void 0 ? void 0 : props.className, readOnly ? 'readOnly' : '', disabled ? ' disabled' : ''),
    ref: rootRef,
    onTouchStart: handleTouchStart,
    onTouchEnd: handleTouchEnd
  }), /*#__PURE__*/React.createElement("input", {
    readOnly: readOnly,
    disabled: disabled,
    type: "range",
    className: "input-range-input",
    min: min,
    max: max,
    step: step,
    value: value,
    onChange: handleChange
  }), /*#__PURE__*/React.createElement("div", {
    className: "input-range-rail"
  }, /*#__PURE__*/React.createElement("div", {
    className: "input-range-rail-active",
    ref: railRef
  })), /*#__PURE__*/React.createElement("div", {
    ref: handleRef,
    className: "input-range-handle"
  }, /*#__PURE__*/React.createElement("div", {
    className: "input-range-handle-icon"
  })), /*#__PURE__*/React.createElement("div", {
    ref: tooltipRef,
    className: "input-range-tooltip"
  }, value));
});
export default Range;