import React from 'react';
import PropTypes from 'prop-types';
import { EditorState } from 'draft-js';
import { convertFromHTML, convertToHTML } from 'draft-convert';
import classnames from 'classnames';
import Editor from 'draft-js-plugins-editor';
import createMentionPlugin, { defaultSuggestionsFilter, defaultTheme } from 'draft-js-mention-plugin';
import 'draft-js-mention-plugin/lib/plugin.css';
import utils from 'utils';

import styles from './styles.css';
// 为了解决 IE9 下 parseFromString('', 'text/html') 的报错import './DomParserPloyfill';
class GraphHintTextArea extends React.PureComponent {
  // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    let theme = {
      ...defaultTheme,
      mention: styles.mention
    };
    const browser = utils.getBrowserInfo();    if (browser.name === 'msie' && browser.version === '9') {      theme = {        ...defaultTheme,        mention: styles.mention,        mentionSuggestions: styles.mentionSuggestions      };    }    // 设置 mention 标签的可变性、触发字符、样式
    this.mentionPlugin = createMentionPlugin({
      entityMutability: 'IMMUTABLE',
      mentionTrigger: '$',
      theme
    });

    const { value } = this.props;
    const contentState = convertFromHTML({
      // 遇到 class 带有 mention 的标签进行实体的不可变转化，此时 mention 即话术变量标签是一体的
      // 删除只能整个删除，添加也将转化为普通字符
      // eslint-disable-next-line consistent-return
      htmlToEntity: (nodeName, node, createEntity) => {
        if (nodeName === 'span' && node.className === 'mention') {
          const name = node.innerText || '';
          return createEntity('$mention', 'IMMUTABLE', {
            mention: {
              name,
              _id: node.id
            }
          });
        }
      }
    })(value);

    this.state = {
      editorState: EditorState.createWithContent(contentState),
      suggestions: []
    };
  }

  // componentDidMount = () => {
  //   this.focus();
  // }

  // https://github.com/facebook/draft-js/issues/1198
  // 因为此处最开始打算使用 componentWillReceiveProps，但在和 onChange 一起作用时，
  // 导致多次执行，光标跳到行首，只能采用非受控组件的方式手动调用
  setEditorContent(text) {
    const contentState = convertFromHTML({
      // eslint-disable-next-line consistent-return
      htmlToEntity: (nodeName, node, createEntity) => {
        if (nodeName === 'span' && node.className === 'mention') {
          const name = node.innerText || '';
          return createEntity('$mention', 'IMMUTABLE', {
            mention: {
              name,
              _id: node.id
            }
          });
        }
      }
    })(text);
    const { editorState } = this.state;
    // 这里必须用 push 方法，不然会导致编辑器提示框不能弹出
    // https://github.com/draft-js-plugins/draft-js-plugins/issues/210
    const newEditorState = EditorState.push(editorState, contentState);
    this.setState({
      editorState: newEditorState
    });
  }

  // https://github.com/draft-js-plugins/draft-js-plugins/issues/800
  // 不能直接调用 focus，否则会造成 draft-js-mention-plugin 的失效
  // focus = () => {
  //   setTimeout(() => {
  //     this.editor.focus();
  //   }, 0);
  // }

  handleChange = (editorState) => {
    const contentState = editorState.getCurrentContent();
    const pureText = this.convertToPureText(contentState);
    // 暂时不能阻挡非受控组件的输入
    // const { maxLength } = this.props;
    // if (pureText.length > maxLength) {
    //   return;
    // }
    this.setState(
      {
        editorState
      },
      () => {
        this.triggerChange(contentState, pureText);
      }
    );
  };

  handleSearchChange = ({ value }) => {
    const { hints } = this.props;
    this.setState({
      suggestions: defaultSuggestionsFilter(value, hints)
    });
  };

  // 这里是转成看到标签的效果，目的是得到实际字符
  convertToPureText = (contentState) => {
    let htmlToPureText = convertToHTML({
      // eslint-disable-next-line consistent-return
      blockToHTML: (data) => {
        const { type } = data;
        if (type === 'unstyled') {
          return {
            start: '',
            end: '',
            empty: ''
          };
        }
      }
    })(contentState);
    htmlToPureText = htmlToPureText.replace(/<\/?.+?\/?>|\s+/g, '');
    return htmlToPureText;
  };

  // 这里是转成要传给后端的效果
  triggerChange = (contentState, pureText) => {
    const { onChange } = this.props;
    let html = convertToHTML({
      // 将遇到的实体标签转化为 ${id}，以便后端进行处理
      entityToHTML: (entity, originalText) => {
        if (entity.type === '$mention') {
          return `$\{${entity.data.mention._id}}`;
        }
        return originalText;
      },
      // 语音合成需求要求，去除所有换行，即所有无用标签 p，否则会读出标签 p
      // https://github.com/HubSpot/draft-convert/issues/59
      // eslint-disable-next-line consistent-return
      blockToHTML: (data) => {
        const { type } = data;
        if (type === 'unstyled') {
          return {
            start: '',
            end: '',
            // empty 属性代表所有换行都去掉，而不是转为空格
            empty: ''
          };
        }
      }
    })(contentState);
    // 语音合成需求要求，去掉所有空白字符（包含空格、制表符、换页符）和 html 标签（包含<div class="test"></div>、<img />、<My-Tag></My-Tag>这几种）
    html = html.replace(/<\/?.+?\/?>|\s+/g, '');
    if (typeof onChange === 'function') {
      onChange(html, pureText);
    }
    return html;
  };

  handleFocus = () => {
    const { onFocus } = this.props;
    if (typeof onFocus === 'function') {
      onFocus();
    }
  };

  handleBlur = () => {
    const { onBlur } = this.props;
    if (typeof onBlur === 'function') {
      onBlur();
    }
  };

  render() {
    const { placeholder, className } = this.props;
    const { MentionSuggestions } = this.mentionPlugin;
    const plugins = [this.mentionPlugin];
    return (
      <div className={classnames(styles.editor, className)}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.handleChange}
          plugins={plugins}
          placeholder={placeholder}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          ref={(r) => {
            this.editor = r;
          }}
        />
        <MentionSuggestions onSearchChange={this.handleSearchChange} suggestions={this.state.suggestions} />
      </div>
    );
  }
}

GraphHintTextArea.propTypes = {
  placeholder: PropTypes.string,
  onChange: PropTypes.func,
  value: PropTypes.string,
  hints: PropTypes.array,
  className: PropTypes.string,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func
};

export default GraphHintTextArea;