import React, { Component } from 'react';

import {
  message,
  Tag,
} from 'antd';
import moment from 'moment';
import { connect } from 'react-redux';

import NoticeIcon from '../NoticeIcon';
import Notifier from '../Notifier';
import styles from './index.less';

class NoticeIconView extends Component {
  state = {
    count: 0,
    noticeData: [],
  };
  async componentDidMount() {
    let notifier = new Notifier(this.props.global.userInfo);
    notifier.subscribe("NEW_MESSAGE",this.onNewMessage.bind(this));
    notifier.start();

  }

  onNewMessage = messages => {
    this.setState({
      count:messages.totalCount,
      noticeData:messages.messages
    })
  };

  /* eslint-disable no-unused-vars */
  changeReadState = clickedItem => {};

  /* eslint-disable no-unused-vars */
  handleNoticeClear = (title, key) => {};

  getNoticeData = () => {
    const { notices = [] } = this.props;

    if (!notices || notices.length === 0 || !Array.isArray(notices)) {
      return {};
    }

    const newNotices = notices.map(notice => {
      const newNotice = { ...notice };

      if (newNotice.datetime) {
        newNotice.datetime = moment(notice.datetime).fromNow();
      }

      if (newNotice.id) {
        newNotice.key = newNotice.id;
      }

      if (newNotice.extra && newNotice.status) {
        const color = {
          todo: '',
          processing: 'blue',
          urgent: 'red',
          doing: 'gold',
        }[newNotice.status];
        newNotice.extra = (
          <Tag
            color={color}
            style={{
              marginRight: 0,
            }}
          >
            {newNotice.extra}
          </Tag>
        );
      }

      return newNotice;
    });
  };

  render() {
    const { currentUser, fetchingNotices, onNoticeVisibleChange } = this.props;
    const noticeData = [];
    //this.getNoticeData();
    const unreadMsg = [];
    //this.getUnreadData(noticeData);
    return (
      <NoticeIcon
        className={styles.action}
        count={this.state.count > 99 ? 99 : this.state.count}
        onItemClick={item => {
          this.changeReadState(item);
        }}
        loading={fetchingNotices}
        clearText="清空"
        viewMoreText="查看更多"
        onClear={this.handleNoticeClear}
        onPopupVisibleChange={onNoticeVisibleChange}
        onViewMore={() => message.info('Click on view more')}
        clearClose
      >
        <NoticeIcon.Tab
          tabKey="notification"
          list={this.state.noticeData}
          title="通知"
          emptyText="你已查看所有通知"
          showViewMore
        />
      </NoticeIcon>
    );
  }
}

const mapStateToProps = state => {
  return {
    global: state.getIn(['global', 'globalConfig']),
  };
};
export default connect(
  mapStateToProps,
  null,
)(NoticeIconView);
