import { InputNumber } from "antd"
import { useEffect, useState } from "react"

const epsilonN = N => num => Math.round( num * N + Number.EPSILON ) / N;
const epsilon2 = epsilonN(1e2);

export default (props) => {

  const { value, onChange, ...leftProps } = props

  const [percent, setPercent] = useState(0)

  useEffect(() => {
    setPercent(epsilon2(value * 100))
  }, [value])

  const handleChange = (val) => {
    onChange(epsilon2(val / 100))
  }

  return (
    <InputNumber
      min='0'
      {...leftProps}
      value={percent}
      onChange={handleChange}
      precision={2}
      formatter={value => `${value} %`}
      parser={value => value.replace(/\s?%/g, '')}
    />
  )
}