import React from 'react';

import { Badge } from 'antd';
import classNames from 'classnames';
import { connect } from 'react-redux';
import useMergeValue from 'use-merge-value';

import Icon from '@ant-design/icons';

import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import NoticeList from './NoticeList';

const messageSvg = () => (
  <svg
    version="1.1"
    x="0px"
    y="0px"
    width="24px"
    height="24px"
    viewBox="0 0 24 24"
    enableBackground="new 0 0 24 24"
    space="preserve"
  >
    <path
      fill="#5F718C"
      d="M20.486,16.373l-1.721-2.246v-0.984v-0.352V9.924c0-1.919-0.664-3.698-1.871-5.007
        c-0.712-0.776-1.57-1.349-2.551-1.705c-0.091-0.514-0.35-0.983-0.737-1.335c-0.879-0.791-2.334-0.791-3.21,0
        c-0.394,0.354-0.653,0.823-0.741,1.336C8.676,3.568,7.817,4.14,7.105,4.917C5.899,6.229,5.234,8.008,5.234,9.923l0.005,4.194
        l-1.708,2.234c-0.241,0.256-0.372,0.584-0.372,0.932v1.092c0,0.75,0.615,1.357,1.372,1.357H19.47c0.757,0,1.371-0.607,1.371-1.357
        v-1.092C20.841,16.936,20.71,16.607,20.486,16.373z M4.899,17.996v1.016l-0.001-2.061l1.628-2.154
        c0.227-0.244,0.353-0.561,0.353-0.893v-4.05c0-1.516,0.509-2.914,1.436-3.935c0.459-0.506,1.001-0.895,1.608-1.166
        c1.276-0.565,2.883-0.565,4.155,0c0.609,0.273,1.15,0.667,1.608,1.168c0.925,1.021,1.437,2.417,1.437,3.934v2.762v0.338v0.949
        c0,0.334,0.123,0.654,0.336,0.875l1.642,2.164l0.013,1.037L4.899,17.996z"
    />
    <path
      fill="#5F718C"
      d="M13.685,20.236c-0.101,0.238-0.248,0.453-0.444,0.631c-0.677,0.617-1.799,0.615-2.473,0.002
        c-0.194-0.18-0.344-0.396-0.446-0.633H8.895c0.146,0.627,0.474,1.199,0.955,1.639c0.588,0.543,1.354,0.841,2.158,0.841
        c0.801,0,1.566-0.298,2.154-0.837c0.481-0.439,0.808-1.012,0.954-1.641L13.685,20.236z"
    />
  </svg>
);
const BellOutlined = props => <Icon component={messageSvg} {...props} />;
const NoticeIcon = props => {
  const getNotificationBox = () => {
    const { children, confirmRead } = props;
    if (!children) {
      return null;
    }
    const panes = [];

    React.Children.forEach(children, child => {
      if (!child) {
        return;
      }
      const { list, title } = child.props;
      panes.push(
        <NoticeList
          {...child.props}
          data={list}
          key={child}
          title={title}
          config={props.global}
        />,
      );
    });
    const childProps = panes.length === 1 ? panes[0].props : { list: [] };
    return (
      <>
        <div className={styles.header}>
          <span className={styles.title}>通知</span>
          <span
            onClick={() =>
              childProps.list.length > 0 ? confirmRead(true) : null
            }
            style={{
              color: childProps.list.length === 0 && 'rgba(0, 0, 0, 0.5)',
            }}
          >
            全部标记已读
          </span>
        </div>
        {panes}
      </>
    );
  };

  const { className, bell } = props;

  const [visible, setVisible] = useMergeValue(false, {
    value: props.popupVisible,
    onChange: props.onPopupVisibleChange,
  });
  const noticeButtonClass = classNames(className, styles.noticeButton);
  const notificationBox = getNotificationBox();
  const NoticeBellIcon = bell || (
    <BellOutlined className={styles.icon} title="报警" />
  );
  const trigger = (
    <span className={classNames(noticeButtonClass, { opened: visible })}>
      <Badge
        count={props.count}
        overflowCount={99}
        offset={[-4, 8]}
        style={{ boxShadow: 'none' }}
        title="报警"
        className={classNames(
          styles.badge,
          props.count > 0 ? styles.fountMessage : '',
        )}
      >
        {NoticeBellIcon}
      </Badge>
    </span>
  );
  if (!notificationBox) {
    return trigger;
  }

  return (
    <>
      <HeaderDropdown
        placement="bottomRight"
        overlay={notificationBox}
        overlayClassName={styles.popover}
        trigger={['click']}
        visible={visible}
        onVisibleChange={setVisible}
      >
        {trigger}
      </HeaderDropdown>
    </>
  );
};

NoticeIcon.defaultProps = {
  emptyImage:
    'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
};

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