import React, { useState } from 'react';
import './NumberRangeInput.css';

export default function NumberRangeInput({
  value = ['', ''], step = 1, min = -Infinity, max = Infinity,
  separator = '—', unit = '', placeholder = ['最小', '最大'], onChange, onError
}) {
  const [errorMsg, setErrorMsg] = useState('');

  function validate(arr) {
    const a = parseFloat(arr[0]), b = parseFloat(arr[1]);
    let err = '';
    if (arr[0] !== '' && (a < min || a > max)) err = `最小值需在 ${min}~${max}`;
    else if (arr[1] !== '' && (b < min || b > max)) err = `最大值需在 ${min}~${max}`;
    else if (arr[0] !== '' && arr[1] !== '' && a > b) err = '最小值不能大于最大值';
    setErrorMsg(err);
    onError && onError(err);
  }
  function onMin(e) {
    const arr = [e.target.value, value[1]];
    validate(arr);
    onChange && onChange(arr);
  }
  function onMax(e) {
    const arr = [value[0], e.target.value];
    validate(arr);
    onChange && onChange(arr);
  }

  return (
    <div className={'aa-numrange' + (errorMsg ? ' is-error' : '')}>
      <input type="number" value={value[0]} step={step} min={min} max={max}
             placeholder={placeholder[0]} onChange={onMin} />
      <span className="aa-numrange-sep">{separator}</span>
      <input type="number" value={value[1]} step={step} min={min} max={max}
             placeholder={placeholder[1]} onChange={onMax} />
      {unit ? <span className="aa-numrange-unit">{unit}</span> : null}
      {errorMsg ? <span className="aa-numrange-msg">{errorMsg}</span> : null}
    </div>
  );
}