import React from 'react';
import { ConfigProvider } from 'antd';
// eslint-disable-next-line import/no-unresolved
import classNames from 'classnames';
import '../styles/common.less';
import './index.less';
import { getMessageTypeIcon } from '../../utils';

export class NoticeContent {
  // eslint-disable-next-line no-undef
  constructor({ noticeTitle, noticeType, noticeContent, time } = content) {
    this.noticeTitle = noticeTitle;
    this.noticeType = noticeType;
    this.noticeContent = noticeContent;
    this.time = time;
  }
}

const Notice = ({ message, confirmRead, config, handlerSysDetail }) => {
  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls();

  const noticeType = message?.infoContent?.noticeType ?? '系统通知';
  const noticeTitle = message?.infoContent?.noticeTitle;
  const noticeContent = message?.infoContent?.noticeContent ?? '';
  // const remark = message?.infoContent?.remark;

  const goPath = item => {
    confirmRead(false, [message.id]);
    handlerSysDetail && handlerSysDetail(message);
  };

  return (
    <div
      className={classNames(`${prefixCls}-notifier-message_notice`, `${prefixCls}-notifier-message-container`)}
      title="点击查看详情"
      onClick={() => goPath(message)}
      style={{ backgroundImage: `url(${getMessageTypeIcon(message)})` }}
    >
      <div className={`${prefixCls}-notifier-message-title`}>
        <span>
          {noticeType}
          {noticeTitle ? `:${noticeTitle}` : ''}
        </span>
        <img
          className={`${prefixCls}-notifier-message-confirm`}
          title="点击标为已读"
          onClick={e => {
            e.stopPropagation();
            confirmRead(false, [message.id]);
          }}
          // eslint-disable-next-line global-require
          src={require('../../images/oper/ok_line.png')}
          alt=""
        />
      </div>
      <div className={`${prefixCls}-notifier-message-content`}>
        <p>{noticeContent}</p>
      </div>
      <p className={`${prefixCls}-notifier-message-time`}>{message.time}</p>
    </div>
  );
};

export default Notice;