import React, { useEffect, useState } from 'react';
import { Tag } from 'antd';
import { ParamValueType } from '../../qx-filter-condition/filter';
import { QxTagsInput } from '../../qx-tags-input';
import { CloseOutlined } from '@ant-design/icons';

interface InputSetterProps {
  value?: any[];
  onChange: (val: any) => void;
  disabled: boolean;
  multiple: boolean;
  params: any;
  getName?: (str: string[], isStr?: boolean) => string;
  getCompleteName?: (str: string[], isStr?: boolean) => string;
}

/**
 * 用户选择
 *
 * @param value
 * @param onChange
 * @param disabled
 * @constructor
 */
export const InputSetter: React.FC<InputSetterProps> = ({ value, onChange, ...props }) => {
  const [valueObj, setValueObj] = useState({ valueType: ParamValueType.MANUAL, valueMap: {} });
  useEffect(() => {
    const _valueMap = {};
    const fieldValues: string[] = [];
    let _valueType = ParamValueType.MANUAL;
    (value || []).forEach((item) => {
      if (item.type === ParamValueType.FIELD) {
        fieldValues.push(item.value);
        _valueType = ParamValueType.FIELD;
      } else {
        _valueMap[item.value] = item.value;
      }
    });
    //field 目前只能选一个
    if (typeof props.getName === 'function' && fieldValues.length > 0) {
      _valueMap[fieldValues.join(',')] = fieldValues.join(',');
    }

    if (JSON.stringify(_valueMap) !== JSON.stringify(valueObj.valueMap)) {
      setValueObj({ valueType: _valueType, valueMap: _valueMap });
    }
  }, [value]);

  const removeItem = (e: any, item: string) => {
    e.preventDefault();
    //TODO 如果是选多个字段，此处处理会有问题
    const _valueMap = { ...valueObj.valueMap };
    delete _valueMap[item];
    let _valueType = valueObj.valueType;
    if (Object.keys(_valueMap).length === 0) {
      _valueType = ParamValueType.MANUAL;
    }

    setValueObj({ valueType: _valueType, valueMap: _valueMap });
    onChange(Object.keys(_valueMap));
  };

  const handleManualChange = (manualValues: string[]) => {
    onChange(manualValues);
  };

  return (
    <>
      {valueObj.valueType === ParamValueType.FIELD ? (
        <div className="select sel-user-show ant-input btn-text">
          {Object.keys(valueObj.valueMap).map((item: any) => (
            <Tag
              key={`${item}`}
              closeIcon={<CloseOutlined />}
              closable
              title={props.getCompleteName && props.getCompleteName([item])}
              onClose={(e) => removeItem(e, item)}
              onClick={(e) => e.stopPropagation()}
              bordered={false}
            >
              {props.getName && props.getName([item])}
            </Tag>
          ))}
        </div>
      ) : (
        <QxTagsInput
          disabled={props.disabled}
          value={Object.keys(valueObj.valueMap)}
          onChange={handleManualChange}
        />
      )}
    </>
  );
};