import React, { Component } from 'react';
import { connect } from 'react-redux';
import NoticeIcon from '../NoticeIcon';
import styles from './index.less';
import Notifier, {NEW_MESSAGE} from '../Notifier';

class NoticeIconView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      noticeData: [],
    };
    this.notifier = new Notifier(this.props.global.userInfo);
  }

  async componentDidMount() {
    this.notifier.subscribe(NEW_MESSAGE,this.onNewMessage.bind(this));
    this.notifier.start();
  }

  componentWillUnmount(){
    this.notifier && this.notifier.stop();
  }

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

  render() {
    return (
      <NoticeIcon
        className={styles.action}
        count={this.state.count}
        confirmRead={this.notifier.confirmRead}
      >
        <NoticeIcon.Tab
          list={this.state.noticeData}
          title="通知"
          emptyText="你已查看所有通知"
          confirmRead={this.notifier.confirmRead}
          loadMore={this.notifier.loadMore}
          hasMore = {this.notifier.hasMore}
        />
      </NoticeIcon>
    );
  }
}

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

export default connect(
  mapStateToProps,
  null,
)(NoticeIconView);
