/*
 * @Author: your name
 * @Date: 2021-12-16 14:37:12
 * @Description:
 * @FilePath: \zl-business\src\components\Unit\textInput\index.tsx
 */

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

import Icon from 'src/components/Icon/index';
import Wrap from '../wrap/Wrap';
import { Input } from 'antd';
import { returnClass } from '../unit';
import '../g.scss';

function LabelTextInput(props: ILabelTextInput) {
  const {
    title,
    value = '',
    change,
    size = 'normal',
    disabled = false,
    suffixicon,
    prefixIcon,
    paddingSize,
    padding,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    placeholder,
    maxLength,
    empty = false,
    maxWidth,
    nonNull = true // 非空
  } = props;
  const [inputValue, setInputValue] = useState(value); // 值
  const inputRef = useRef<any>(null);
  const inputRef2 = useRef<any>(null);
  // 监听值变化
  useEffect(() => {
    setInputValue(value);
  }, [value, placeholder]);

  //如果接受数据是对象，有disabled的状态
  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        {title ? (
          <>
            <div
              className={returnClass(paddingSize ? paddingSize : 'normal')}
              style={{
                marginRight: paddingSize ? paddingSize : padding,
                minWidth: maxWidth ? maxWidth : ''
                // minWidth: title === '样式ID' && empty ? 36 : ''
              }}
            >
              {title}
            </div>
            <div
              className={
                size === 'normal'
                  ? 'zl-large-screen-setting-unit-content'
                  : 'zl-large-screen-setting-unit-content-large'
              }
            >
              {empty ? (
                <span className="zl-ls-input-empty">
                  {value === '' ? '空' : <span title={value}>{value}</span>}
                </span>
              ) : (
                <Input
                ref={inputRef}
                  value={inputValue}
                  // defaultValue={inputValue}
                  disabled={disabled}
                  suffix={suffixicon}
                  placeholder={placeholder}
                  maxLength={maxLength}
                  prefix={
                    prefixIcon ? (
                      <Icon name={prefixIcon} style={{ marginRight: '4px' }} />
                    ) : (
                      ''
                    )
                  }
                  onPressEnter={() => {
                    inputRef?.current?.blur();
                  }}
                  onChange={(e) => {
                    change?.(e.target.value, 'change');
                    setInputValue(e.target.value);
                  }}
                  onBlur={(e) => {
                    if (nonNull && !e.target.value) {
                      setInputValue(value);
                      change?.(value, 'blur');
                    } else {
                      change?.(e.target.value, 'blur');
                    }
                  }}
                />
              )}
            </div>
          </>
        ) : (
          <>
            {empty ? (
              <span className="zl-ls-input-empty">
                {value === '' ? '空' : <span>{value}</span>}
              </span>
            ) : (
              <Input
              ref={inputRef2}
                value={inputValue}
                defaultValue={inputValue}
                disabled={disabled}
                suffix={suffixicon}
                maxLength={maxLength}
                prefix={
                  prefixIcon ? (
                    <Icon name={prefixIcon} style={{ marginRight: '4px' }} />
                  ) : (
                    ''
                  )
                }
                placeholder={placeholder}
                onChange={(e) => {
                  change?.(e.target.value, 'change');
                  setInputValue(e.target.value);
                }}
                onPressEnter={(e) => {
                  inputRef2?.current?.blur();
                }}
                onBlur={(e) => change?.(e.target.value, 'blur')}
              />
            )}
          </>
        )}
      </Wrap>
    );
  }, [
    title,
    value,
    disabled,
    suffixicon,
    prefixIcon,
    inputValue,
    placeholder,
    empty
  ]);

  return Redio;
}

export default LabelTextInput;

export interface ILabelTextInput {
  title?: any;
  value?: any;
  change?: Function;
  size?: string;
  disabled?: boolean;
  suffixicon?: string;
  prefixIcon?: string;
  paddingSize?: string;
  wrapStyle?: React.CSSProperties;
  padding?: string;
  placeholder?: string;
  maxLength?: number;
  empty?: boolean;
  nonNull?: boolean;
  maxWidth?: number;
}