import { Tag, Input, Tooltip, Modal, message } from 'antd';
import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
import styles from './index.less';
class TagSelect extends React.Component {
  state = {
    value: this.props.value != null ? this.props.value : [],
    inputVisible: false,
    inputValue: '',
    editInputIndex: -1,
    editInputValue: '',
  };

  // componentDidUpdate(value) {
  //   console.log('--组件更新--');
  //   console.log(this.props.value);
  //   console.log(value);
  // }

  // componentDidMount(value) {
  //   console.log('--组件加载完成--');
  //   console.log(this.state.value);
  //   console.log(value);
  // }

  componentWillReceiveProps(value) {
    this.setState({ value: value.value });
  }

  handleClose = (removedTag, e) => {
    console.log(removedTag, e);
    const that = this;
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        const value = that.state.value.filter((tag) => tag !== removedTag);
        that.props.onRemove(removedTag);
        that.setState({ value });
        that.props.onChange(value);
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  showInput = () => {
    this.setState({ inputVisible: true }, () => this.input.focus());
  };

  handleInputChange = (e) => {
    this.setState({ inputValue: e.target.value });
  };

  handleInputConfirm = () => {
    const { inputValue } = this.state;
    let { value } = this.state;
    if (!inputValue.trim()) {
      message.error('Not Null!!!');
      this.setState({ inputVisible: false });
      return;
    }

    if (inputValue && value.indexOf(inputValue) === -1) {
      this.props.onAdd(inputValue);
      // value = [...value, inputValue];
    }
    this.props.onChange(value);
    this.setState({
      value,
      inputVisible: false,
      inputValue: '',
    });
  };

  handleEditInputChange = (e) => {
    console.log(e.target.value);
    this.setState({ editInputValue: e.target.value });
  };

  handleEditInputConfirm = () => {
    this.setState(({ value, editInputIndex, editInputValue }) => {
      const newTags = [...value];
      newTags[editInputIndex] = editInputValue;
      this.props.onAdd(editInputValue, editInputIndex);
      this.props.onChange(newTags);
      return {
        value: newTags,
        editInputIndex: -1,
        editInputValue: '',
      };
    });
  };

  saveInputRef = (input) => {
    this.input = input;
  };

  saveEditInputRef = (input) => {
    this.editInput = input;
  };

  render() {
    const { value, inputVisible, inputValue, editInputIndex, editInputValue, visible } = this.state;
    return (
      <>
        {value.map((tag, index) => {
          if (editInputIndex === index) {
            return (
              <Input
                ref={this.saveEditInputRef}
                key={tag}
                size="small"
                className={styles.tagInput}
                value={editInputValue}
                onChange={this.handleEditInputChange}
                onBlur={this.handleEditInputConfirm}
                onPressEnter={this.handleEditInputConfirm}
              />
            );
          }

          const isLongTag = value.length > 20;

          const tagElem = (
            <Tag
              className="editTag"
              key={tag}
              closable={index !== 0 && index !== 1}
              onClose={(e) => this.handleClose(tag, e)}
              visible={true}
              color={index === 0 || index === 1 ? 'blue' : ''}
              style={index === 1 ? { marginBottom: 40 } : ''}
            >
              <span
                onDoubleClick={(e) => {
                  if (index !== 0 && index !== 1) {
                    this.setState({ editInputIndex: index, editInputValue: tag }, () => {
                      this.editInput.focus();
                    });
                    e.preventDefault();
                  }
                }}
              >
                {isLongTag ? `${value.slice(0, 20)}...` : tag}
              </span>
            </Tag>
          );
          //   return

          return index === 0 || index === 1 ? (
            <div style={{ marginBottom: 20 }}>
              {tagElem}
              <br />
            </div>
          ) : isLongTag ? (
            <Tooltip title={tag} key={tag}>
              {tagElem}
            </Tooltip>
          ) : (
            tagElem
          );
        })}

        {inputVisible && (
          <Input
            ref={this.saveInputRef}
            type="text"
            size="small"
            className={styles.tagInput}
            value={inputValue}
            onChange={this.handleInputChange}
            onBlur={this.handleInputConfirm}
            onPressEnter={this.handleInputConfirm}
          />
        )}
        {!inputVisible && (
          <Tag className={styles.siteTagPlus} onClick={this.showInput}>
            <PlusOutlined /> New Services
          </Tag>
        )}
      </>
    );
  }
}

export default TagSelect;
