import React, { useEffect, useMemo, useState, useRef } from 'react';

import Wrap from '../wrap/Wrap';
import { InputNumber } from 'antd';
import { returnClass } from '../unit';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
import '../g.scss';

function LabelTwoInputNumber(props: ILabelInputNumber) {
  const {
    title = 'label',
    oneValue,
    change,
    size = 'normal',
    paddingSize,
    min,
    max,
    suffixicon,
    disabled = false,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    minValue,
    maxValue,
    handleException = true, // 是否自动处理异常
    step, // 步进值默认为1，可以传入小数
    padding,
    controls = false,
    placeholder,
    float = true,
    twoValue
  } = props;
  const [inputValue, setInputValue] = useState(oneValue); //value的值
  const [twoInputValue, setTwoInputValue] = useState(twoValue);
  const inputRef = useRef<any>(null);
  //改变value的值
  useEffect(() => {
    setInputValue(oneValue);
  }, [oneValue]);

  //改变value的值
  useEffect(() => {
    setTwoInputValue(twoValue);
  }, [twoValue]);

  return (
    <Wrap wrapStyle={wrapStyle}>
      <div
        className={returnClass(paddingSize ? paddingSize : 'normal')}
        style={{ marginRight: paddingSize ? paddingSize : padding }}
      >
        {title}
      </div>
      <div
        style={{ justifyContent: 'space-between' }}
        className={
          size === 'normal'
            ? 'zl-large-screen-setting-unit-content'
            : 'zl-large-screen-setting-unit-content-large'
        }
      >
        <InputNumber
          size="small"
          keyboard
          controls={
            controls
              ? {
                  upIcon: <CaretUpOutlined />,
                  downIcon: <CaretDownOutlined />
                }
              : false
          }
          ref={inputRef}
          placeholder={placeholder}
          style={{ width: '56px' }}
          value={inputValue}
          disabled={disabled}
          min={min}
          max={max}
          step={step || 1}
          onChange={(value) => {
            // change?.(float ? value : parseInt(value), 'numberinpuetchange');
            setInputValue(float ? value : parseInt(value));
          }}
          onPressEnter={() => {
            inputRef?.current?.blur();
          }}
          onBlur={(e) => {
            if (
              inputValue === null ||
              inputValue < minValue ||
              inputValue > maxValue ||
              isNaN(inputValue)
            ) {
              handleException ? setInputValue(oneValue) : setInputValue(null); // 对不符合条件的数据置空
            }

            change?.(
              e?.target?.value === '' || isNaN(e?.target?.value)
                ? handleException
                  ? oneValue
                  : null
                : float
                ? e.target.value
                : parseInt(e.target.value),
              'oneValue'
            );
          }}
        />
        {suffixicon ? (
          <span className="zl-large-screen-input-number-icon">
            {suffixicon}
          </span>
        ) : (
          <></>
        )}
        <InputNumber
          size="small"
          keyboard
          controls={
            controls
              ? {
                  upIcon: <CaretUpOutlined />,
                  downIcon: <CaretDownOutlined />
                }
              : false
          }
          ref={inputRef}
          placeholder={placeholder}
          style={{ width: '56px' }}
          value={twoInputValue}
          disabled={disabled}
          min={min}
          max={max}
          step={step || 1}
          onChange={(value) => {
            // change?.(float ? value : parseInt(value), 'numberinpuetchange');
            setTwoInputValue(float ? value : parseInt(value));
          }}
          onPressEnter={() => {
            inputRef?.current?.blur();
          }}
          onBlur={(e) => {
            if (
              twoInputValue === null ||
              twoInputValue < minValue ||
              twoInputValue > maxValue ||
              isNaN(twoInputValue)
            ) {
              handleException
                ? setTwoInputValue(twoValue)
                : setTwoInputValue(null); // 对不符合条件的数据置空
            }
            change?.(
              e?.target?.value === '' || isNaN(e?.target?.value)
                ? handleException
                  ? twoValue
                  : null
                : float
                ? e.target.value
                : parseInt(e.target.value),
              'twoValue'
            );
          }}
        />
      </div>
    </Wrap>
  );
}

export default LabelTwoInputNumber;

export interface ILabelInputNumber {
  title?: any;
  oneValue?: number;
  change?: Function;
  size?: string;
  disabled?: boolean;
  suffixicon?: string;
  paddingSize?: string;
  min?: number;
  max?: number;
  wrapStyle?: React.CSSProperties;
  inputValueMin?: Number;
  minValue?: number;
  maxValue?: number;
  step?: number;
  controls?: boolean;
  handleException?: boolean;
  float?: boolean;
  padding?: number;
  placeholder: number;
  twoValue: number;
}