import React, { PureComponent } from "react";
import { Popover, Icon, Tabs, Badge, Spin } from "antd";
import classNames from "classnames";
import List from "./NoticeList";
import styles from "./index.less";

const { TabPane } = Tabs;

export default class NoticeIcon extends PureComponent {
  static defaultProps = {
    onItemClick: () => {},
    onPopupVisibleChange: () => {},
    onTabChange: () => {},
    searchFor: () => {},
    loading: false,
    locale: {
      emptyText: "暂无数据",
      clear: "清空"
    },
    emptyImage:
      "https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
  };
  static Tab = TabPane;
  constructor(props) {
    super(props);
    this.state = {};
    if (props.children && props.children[0]) {
      this.state.tabType = props.children[0].props.title;
    }
  }
  onItemClick = (item, tabProps) => {
    const { onItemClick } = this.props;
    onItemClick(item, tabProps);
  };
  onTabChange = tabType => {
    this.setState({ tabType });
    this.props.onTabChange(tabType);
  };
  getNotificationBox() {
    const { children, loading, locale } = this.props;
    if (!children) {
      return null;
    }
    let panes = [];
    if (children instanceof Array) {
      panes = children.map(child => {
        const title =
          child.props.list && child.props.list.length > 0
            ? `${child.props.title} (${child.props.list.length})`
            : child.props.title;
        return (
          <TabPane tab={title} key={child.props.title}>
            <List
              {...child.props}
              data={child.props.list}
              onClick={item => this.onItemClick(item, child.props)}
              searchFor={(type) => {this.props.searchFor(type)}}
              // searchFor={() => this.props.searchFor(child.props.title)}
              title={child.props.title}
              locale={locale}
            />
          </TabPane>
        );
      });
    } else {
      const title =
        children.props.list && children.props.list.length > 0
          ? `${children.props.title} (${children.props.list.length}条未读)`
          : children.props.title;
      panes = [
        <TabPane
          tab={
            <div className="TabPanetitle">
              <span className="TabPanetitle-l">{title}</span>{" "}
              <span
                onClick={() => this.props.readAll()}
                className="TabPanetitle-r"
              >
                全部标记已读
              </span>
            </div>
          }
          key={children.props.title}
        >
          <List
            {...children.props}
            data={children.props.list}
            onClick={item => this.onItemClick(item, children.props)}
            searchFor={(type) => {this.props.searchFor(type)}}
            // searchFor={() => this.props.searchFor(children.props.title)}
            title={children.props.title}
            locale={locale}
          />
        </TabPane>
      ];
    }

    return (
      <Spin spinning={loading} delay={0}>
        <Tabs className={styles.tabs} onChange={this.onTabChange}>
          {panes}
        </Tabs>
      </Spin>
    );
  }
  render() {
    const { className, count, popupAlign, onPopupVisibleChange } = this.props;
    const noticeButtonClass = classNames(className, styles.noticeButton);
    const notificationBox = this.getNotificationBox();
    const trigger = (
      <span className={noticeButtonClass}>
        <Badge count={count} className={styles.badge}>
          <Icon type="bell" className={styles.icon} />
        </Badge>
      </span>
    );
    if (!notificationBox) {
      return trigger;
    }
    const popoverProps = {};
    if ("popupVisible" in this.props) {
      popoverProps.visible = this.props.popupVisible;
    }
    return (
      <Popover
        placement="bottomRight"
        content={notificationBox}
        popupClassName={styles.popover}
        trigger="click"
        arrowPointAtCenter
        popupAlign={popupAlign}
        onVisibleChange={onPopupVisibleChange}
        {...popoverProps}
      >
        {trigger}
      </Popover>
    );
  }
}