import React__default, { useState, useEffect } from 'react';
import { Row, Col, InputNumber, Slider } from 'antd';
import Title from '../Title/index.js';
import '../IconFont/index.js';
import '../_rollupPluginBabelHelpers-736b301a.js';
import '@zenview/micro-utils';
import '../BetweenBox/index.js';

let timer = null;
const SimilarityFilter = ({
  className,
  title,
  icon,
  tooltipVisible,
  min = 60,
  max = 99,
  reverse,
  onChange,
  value
}) => {
  const [data, setData] = useState(value);
  useEffect(() => {
    setData(value);
  }, [value]);
  return /*#__PURE__*/React__default.createElement("div", {
    className: `lm-filter-slider-wrapper ${className}`
  }, title && /*#__PURE__*/React__default.createElement(Title, {
    icon: icon,
    title: title,
    className: ""
  }), /*#__PURE__*/React__default.createElement(Row, {
    className: "slider-container-row",
    gutter: 4
  }, /*#__PURE__*/React__default.createElement(Col, {
    span: 4,
    className: "input-number-container"
  }, /*#__PURE__*/React__default.createElement(InputNumber, {
    min: min,
    max: max,
    value: data,
    onChange: val => {
      setData(val);
      clearTimeout(timer);
      timer = setTimeout(() => {
        onChange(val);
      }, 300);
    }
  })), /*#__PURE__*/React__default.createElement(Col, {
    span: 2,
    className: "slider-min slider-tip"
  }, '%'), /*#__PURE__*/React__default.createElement(Col, {
    span: 2,
    className: "slider-min slider-tip"
  }, `${reverse ? max : min}%`), /*#__PURE__*/React__default.createElement(Col, {
    span: 14,
    className: "slider-container"
  }, /*#__PURE__*/React__default.createElement(Slider, {
    tooltipVisible: tooltipVisible,
    min: min,
    max: max,
    value: data,
    onChange: setData,
    onAfterChange: onChange,
    reverse: reverse
  })), /*#__PURE__*/React__default.createElement(Col, {
    span: 2,
    className: "slider-max slider-tip"
  }, `${reverse ? min : max}%`)));
};

export { SimilarityFilter as default };
//# sourceMappingURL=index.js.map
