import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MessageItem from './MessageItem';
import PropTypes from 'prop-types';

/**
 * 提示消息组件
 * 消息分为三种类型 普通tip、计时tip、延时tip
 * 其中前两种消息可以设置四种消息内容分类
 */

class Message extends Component {
  static propTypes = {
    /**
     *  提示内容 	React.Element or String
     */
    content: PropTypes.oneOfType([
      PropTypes.document,
      PropTypes.string,
    ]),
    /**
     * 	自动关闭的延时，单位秒。loading的默认是0，即不自动关闭
     */
    duration: PropTypes.number,
    /**
     * 是否有关闭按钮,默认 false
     */
    closable: PropTypes.bool,
    /**
     * 	消息结束的回调
     */
    onClose: PropTypes.func,
    /**
     * 消息出现的方向
     */
    direction: PropTypes.oneOf(['top', 'bottom', 'center', 'left', 'right']),
  }

  static defaultProps = {
    closable: false,
    duration: 1.5,
    direction: 'top',
  }

  state = {
    // 当前消息列表
    messages: [],
  };

  // 增加消息item
  add = (newMessage) => {
    let messages = this.state.messages;
    // 判断数组是否相同key值的数据
    let hasSomeKey = messages.filter(m => m.key === newMessage.key).length;
    if (!hasSomeKey) {
      this.setState({
        messages: messages.concat(newMessage),
      });
    }
  };

  // 去除消息item
  remove = (key) => {
    // 去除后的消息列表
    let newMessages = this.state.messages.filter(m => m.key !== key);
    this.setState({
      messages: newMessages,
    });
  };


  render() {
    // 渲染message列表
    let messageNodes = this.state.messages.map(message => {
      return (
        <MessageItem
          {...message}
          mKey={message.key}
          onRemove={this.remove}
        >
          {message.content}
        </MessageItem>
      );
    });
    return (
      <div className="im-message" style={{
        zIndex: this.zIndex,
      }}>
        {messageNodes}
      </div>
    );
  }
}

// Message初始化
Message.init = function (properties) {
  const props = properties || {};
  const div = document.createElement('div');
  div.className = 'im-message-wrapper';
  document.body.appendChild(div);
  const message = ReactDOM.render(<Message {...props} />, div);

  return {
    // 生成messageItem
    add: function notice(messageProps) {
      message.add(messageProps);
    },
    // 根据key值清除指定messageItem
    remove: function removeNotice(key) {
      message.remove(key);
    },
    // componet对象
    component: message,
    // 销毁整个message实例
    destroy: function destroy() {
      ReactDOM.unmountComponentAtNode(div);
      document.body.removeChild(div);
    },
  };
};

export default Message;