import React, { useCallback } from 'react'

import { InputNumber } from 'antd'
import { LowAndHighRange } from '../../types/searchSelect'

type ComponentProps = {
  range: LowAndHighRange
  onChange: (range: LowAndHighRange) => void
}

const RangeFilterLowHighInput: React.FC<ComponentProps> = ({ range: { low, high }, onChange }) => {
  const handleLowChange = useCallback(
    low => {
      onChange({
        low,
        high,
      })
    },
    [high, onChange]
  )

  const handleHighChange = useCallback(
    high => {
      onChange({
        low,
        high,
      })
    },
    [low, onChange]
  )

  return (
    <React.Fragment>
      <InputNumber placeholder="请输入最小值" value={low} onChange={handleLowChange} />
      <div className="split">-</div>
      <InputNumber placeholder="请输入最大值" value={high} onChange={handleHighChange} />
    </React.Fragment>
  )
}

export default RangeFilterLowHighInput