import React from 'react';

import {
  List,
  Spin,
} from 'antd';
import classNames from 'classnames';

import styles from './NoticeList.less';
import Alarm from './Templates/Alarm';
import Case from './Templates/Case';
import Notice from './Templates/Notice';
import Unknown from './Templates/Unknown';

const Empty = ({ emptyText }) => (
  <div className={styles.notFound}>
    <img
      src="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
      alt="not found"
    />
    <div>{emptyText}</div>
  </div>
);

class NoticeList extends React.Component {
  constructor(props) {
    super(props);
    this.emptyText = props.emptyText;
    this.confirmRead = props.confirmRead;
    this.handlerSysDetail = props.handlerSysDetail;
    this.loadMore = props.loadMore;
    this.hasMore = props.hasMore;
    this.container = React.createRef();
    this.state = {
      isLoading: false,
    };
    this.mounted = false;
    this.handleScrollCallback = this.throttle(
      this.handleScroll.bind(this),
      30,
    ).bind(this);
  }

  componentDidMount() {
    this.mounted = true;
    if (this.container.current) {
      this.container.current.addEventListener(
        'scroll',
        this.handleScrollCallback,
      );
    }
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  throttle(fn, wait) {
    /* eslint-disable */
    let pre = Date.now();
    return function() {
      const context = this;
      // eslint-disable-next-line prefer-rest-params
      const args = arguments;
      const now = Date.now();
      if (now - pre >= wait) {
        fn.apply(context, args);
        pre = Date.now();
      }
    };
  }

  handleScroll(e) {
    e.stopPropagation();
    if (!this.mounted) return;
    if (!this.container.current) return;
    const { current } = this.container;
    if (
      current.scrollHeight - current.scrollTop - current.offsetHeight <=
      100
    ) {
      this.handleLoadMore();
    }
  }

  handleLoadMore() {
    if (this.state.isLoading) return;
    if (!this.hasMore()) return;
    this.setState(
      {
        isLoading: true,
      },
      () => {
        if (!this.loadMore) return;
        this.loadMore().then(data => {
          if (!this.mounted) return;
          this.setState({
            isLoading: false,
          });
        });
      },
    );
  }

  render() {
    if (!this.props.data || this.props.data.length === 0) {
      return <Empty emptyText={this.emptyText} />;
    }
    return (
      <div className={styles.container} ref={this.container}>
        <List
          className={styles.list}
          dataSource={this.props.data}
          renderItem={(item, i) => {
            const itemCls = classNames(styles.item, {
              [styles.read]: item.read,
            });
            let messageTemplate = <></>;
            switch (item.infoType) {
              case 'scadaType':
                messageTemplate = (
                  <Alarm message={item} confirmRead={this.confirmRead} config={this.props.config} />
                );
                break;
              case 'caseType':
                messageTemplate = (
                  <Case message={item} confirmRead={this.confirmRead} />
                );
                break;
              case 'sysType':
                messageTemplate = (
                  <Notice message={item} confirmRead={this.confirmRead} config={this.props.config} handlerSysDetail={this.handlerSysDetail}/>
                );
                break;
              default:
                messageTemplate = (
                  <Unknown message={item} confirmRead={this.confirmRead} />
                );
                break;
            }
            return (
              <List.Item className={itemCls} key={item.id || i}>
                {messageTemplate}
              </List.Item>
            );
          }}
        />
        <div className={styles.bottomBar}>
          {this.state.isLoading ? (
            <>
              <Spin /> 加载中...
            </>
          ) : this.hasMore() ? (
            <span>下拉加载更多</span>
          ) : (
            <span style={{fontSize: '12px', color: 'rgba(0, 0, 0, 0.6)'}}>已经没有更多消息了</span>
          )}
        </div>
      </div>
    );
  }
}

export default NoticeList;