import React from 'react';

import { Badge, Button, ConfigProvider } from 'antd';
// eslint-disable-next-line import/no-unresolved
import classNames from 'classnames';
import useMergeValue from 'use-merge-value';

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

import HeaderDropdown from '@wisdom-utils/components/lib/AppLayout/components/HeaderDropdown';
import NoticeList from './list';
import './style/index.less';

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="hsla(221, 100%, 95%, 0.7)"
      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="hsla(221, 100%, 95%, 0.7)"
      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 { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
  const prefixCls = props.prefixCls || getPrefixCls();
  const btnPrefixCls = `${prefixCls}-head-notifier-button`;
  const popPrefixCls = `${prefixCls}-head-notifier-popover`;

  const getNotificationBox = () => {
    const { children, confirmRead, renderFooter } = 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.config} />);
    });
    const childProps = panes.length === 1 ? panes[0].props : { list: [] };
    return (
      <>
        <div className={`${popPrefixCls}-header`}>
          <span className={`${popPrefixCls}-title`}>通知</span>
          <Button
            type="link"
            onClick={() => (childProps.list.length > 0 ? confirmRead(true) : null)}
            disabled={childProps.list.length === 0}
          >
            全部标记已读
          </Button>
        </div>
        {panes}
        {renderFooter && renderFooter()}
      </>
    );
  };

  const { className, bell } = props;

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

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

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

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