import React, { useEffect, useState } from 'react'
import { Slider, InputNumber, Row, Col } from 'antd'
import Title from '../Title'
import './index.less'

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 (
    <div className={`lm-filter-slider-wrapper ${className}`}>
      {title && <Title icon={icon} title={title} className=""/>}
      <Row className="slider-container-row" gutter={4}>
        <Col span={4} className="input-number-container">
          <InputNumber
            min={min}
            max={max}
            value={data}
            onChange={val => {
              setData(val)
              clearTimeout(timer)
              timer = setTimeout(() => {
                onChange(val)
              }, 300)
            }}
          />
        </Col>
        <Col span={2} className="slider-min slider-tip">
          {'%'}
        </Col>
        <Col span={2} className="slider-min slider-tip">
          {`${reverse ? max : min}%`}
        </Col>
        <Col span={14} className="slider-container">
          <Slider tooltipVisible={tooltipVisible} min={min} max={max} value={data} onChange={setData} onAfterChange={onChange} reverse={reverse}/>
        </Col>
        <Col span={2} className="slider-max slider-tip">
          {`${reverse ? min : max}%`}
        </Col>
      </Row>
    </div>
  )
}
export default SimilarityFilter
