import React from 'react';
// @ts-ignore
import InputNumber from 'rc-input-number';
import { ThemeProps, themeable } from '../theme';
import { ucFirst } from '../utils/helper';
export interface NumberProps extends ThemeProps {
  placeholder?: string;
  max?: number;
  min?: number;
  step?: number;
  showSteps?: boolean;
  precision?: number;
  disabled?: boolean;
  name: string;
  colIndex?: number;
  keyboard: boolean;
  /**
   * 只读
   */
  readOnly?: boolean;
  onKeyDown?: (value: KeyboardEvent) => void;
  value?: number;
  onChange?: (value: number) => void;
  onBlur: (e: any) => void;
  onFocus?: (e: any) => void
  /**
   * 边框模式，全边框，还是半边框，或者没边框。
   */
  borderMode?: 'full' | 'half' | 'none';
  /**
   * 指定输入框展示值的格式
   */
  formatter?: Function;
  /**
   * 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用
   */
  parser?: Function;
  prefix?: string;
  suffix?: string;
}

export class NumberInput extends React.Component<NumberProps, any> {
  static defaultProps: Pick<NumberProps, 'step' | 'readOnly' | 'borderMode'> = {
    step: 1,
    readOnly: false,
    borderMode: 'full'
  };
  // Jay
  constructor(props: NumberProps) {
    super(props)
    this.state = {
      value: props.value
    }
  }
  componentDidUpdate() {
    if (this.state.value !== this.props.value) {
      this.setState({ value: this.props.value })
    }
  }

  handleChange = (value: any) => {
    const { min, max, onChange } = this.props;

    if (typeof value === 'number') {
      if (typeof min === 'number') {
        value = Math.max(value, min);
      }

      if (typeof max === 'number') {
        value = Math.min(value, max);
      }
    }
    this.setState({
      value
    })
    onChange?.(value);
  }

  render(): JSX.Element {
    const {
      className,
      classPrefix: ns,
      classnames: cx,
      value,
      step,
      precision,
      max,
      min,
      disabled,
      placeholder,
      onChange,
      showSteps,
      formatter,
      parser,
      borderMode,
      readOnly
    } = this.props;

    let precisionProps: any = {};

    if (typeof precision === 'number') {
      precisionProps.precision = precision;
    }


    return (
      <InputNumber
        className={cx(className, showSteps === false ? 'no-steps' : '', {
          [`Number--border${ucFirst(borderMode)}`]: borderMode
        })}
        col-index={this.props.colIndex}
        readOnly={readOnly}
        prefixCls={`${ns}Number`}
        style={{ textAlign: 'inherit', width: '100%' }} // 如果是full模式直接100%展示
        // value={value} // Jay 优化性能
        value={this.state.value}
        step={step}
        max={max || 9999999999999.99}
        name={this.props.name}
        min={min}
        keyboard={this.props.keyboard || false}
        formatter={formatter}
        parser={parser}
        onChange={this.handleChange}
        disabled={disabled}
        onKeyDown={this.props.onKeyDown}
        placeholder={placeholder}
        onBlur={this.props.onBlur}
        onFocus={this.props.onFocus}
        inputMode="decimal"
        {...precisionProps}
        onInput={(text: any) => { // Jay 可以监听value为string时的改变
          const isNaN = Number(text) !== Number(text)
          if (isNaN || text === '') {
            this.props.onChange?.(text);
          } else if (typeof max === 'number' || typeof min === "number") { // 输入超过范围的数值的过程中也会校验
            const v = Number(text)
            if ((max && v > max) || (min && v < min)) {
              this.props.onChange?.(v);
            }
          }
        }}
      />
    );
  }
}

export default themeable(NumberInput);