import React from 'react';

import { Avatar, List } 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>
);

const NoticeList = ({ data = [], emptyText, confirmRead }) => {
  if (!data || data.length === 0) {
    return <Empty emptyText={emptyText} />;
  }
  return (
    <div className={styles.container}>
      <List
        className={styles.list}
        dataSource={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={confirmRead} />
              );
              break;
            case 'caseType':
              messageTemplate = (
                <Case message={item} confirmRead={confirmRead} />
              );
              break;
            case 'sysType':
              messageTemplate = (
                <Notice message={item} confirmRead={confirmRead} />
              );
              break;
            default:
              messageTemplate = (
                <Unknown message={item} confirmRead={confirmRead} />
              );
              break;
          }
          return (
            <List.Item className={itemCls} key={item.id || i}>
              {messageTemplate}
            </List.Item>
          );
        }}
      />
      <div className={styles.bottomBar}>下拉加载更多</div>
    </div>
  );
};

export default NoticeList;
