import { CloseOutlined } from '@ant-design/icons';
import { Form, Input } from 'antd';
import { RuleObject } from 'antd/es/form';
import classNames from 'classnames';
import './index.less';

// 对象
export type ParameterInputObject = {
  value?: any; // 值
  showValue?: any; // 显示值
  fromSelect?: boolean; // 是否来自选择
  activeTab?: string; // 选择镜像、数据集、模型时，保存当前激活的tab
  expandedKeys?: string[]; // 选择镜像、数据集、模型时，保存展开的keys
  checkedKeys?: string[]; // 选择镜像、数据集、模型时，保存选中的keys
  [key: string]: any;
};

// 值类型
export type ParameterInputValue = ParameterInputObject | string;

export interface ParameterInputProps {
  value?: ParameterInputValue;
  onChange?: (value?: ParameterInputValue) => void;
  onClick?: () => void;
  onRemove?: () => void;
  canInput?: boolean;
  textArea?: boolean;
  placeholder?: string;
  allowClear?: boolean;
  className?: string;
  style?: React.CSSProperties;
  size?: 'middle' | 'small' | 'large';
  disabled?: boolean;
  id?: string;
}

function ParameterInput({
  value,
  onChange,
  onClick,
  onRemove,
  canInput = true,
  textArea = false,
  allowClear,
  className,
  style,
  size = 'middle',
  disabled = false,
  id,
  ...rest
}: ParameterInputProps) {
  const valueObj =
    typeof value === 'string' ? { value: value, fromSelect: false, showValue: value } : value;
  if (valueObj && !valueObj.showValue) {
    valueObj.showValue = valueObj.value;
  }
  const isSelect = valueObj?.fromSelect;
  const placeholder = valueObj?.placeholder || rest?.placeholder;
  const InputComponent = textArea ? Input.TextArea : Input;
  const { status } = Form.Item.useStatus();

  // 删除
  const handleRemove = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
    e.stopPropagation();
    onChange?.({
      ...valueObj,
      value: undefined,
      showValue: undefined,
      fromSelect: false,
      activeTab: undefined,
      expandedKeys: [],
      checkedKeys: [],
    });
    onRemove?.();
  };

  return (
    <>
      {(isSelect || !canInput) && !disabled ? (
        <div
          id={id}
          className={classNames(
            'parameter-input',
            { 'parameter-input--large': size === 'large' },
            { [`parameter-input--${status}`]: status },
            className,
          )}
          style={style}
          onClick={onClick}
        >
          {valueObj?.showValue ? (
            <div className="parameter-input__content">
              <span className="parameter-input__content__value">{valueObj?.showValue}</span>
              <CloseOutlined
                className="parameter-input__content__close-icon"
                onClick={handleRemove}
              />
            </div>
          ) : (
            <div className="parameter-input__placeholder">{placeholder}</div>
          )}
        </div>
      ) : (
        <InputComponent
          {...rest}
          id={id}
          size={size}
          className={className}
          style={style}
          placeholder={placeholder}
          allowClear={allowClear}
          value={valueObj?.showValue}
          disabled={disabled}
          onChange={(e) =>
            onChange?.({
              ...valueObj,
              value: e.target.value,
              showValue: e.target.value,
              fromSelect: false,
            })
          }
        />
      )}
    </>
  );
}

export default ParameterInput;

// 必填校验
export const requiredValidator = (rule: RuleObject, value: any) => {
  const trueValue = typeof value === 'object' ? value?.value : value;
  if (!trueValue) {
    return Promise.reject(rule.message || '必填项');
  }
  return Promise.resolve();
};
