import React, { useMemo } from 'react';
import { Row, Col, Divider, Spin, Affix, Button } from 'antd';
import { groupBy } from 'lodash';
import styles from './index.less';
import LevelNotification from '../level-notification';
import NoticeCard from '../notice-card';
import {
  EventRuleItem,
  NoticeRuleItem,
  Category,
} from '../../services/notice-rules/type';

const formatEventRules = (eventRules: EventRuleItem[]) => {
  const data = eventRules?.map((item: EventRuleItem) => {
    return { ...item, label: item.eventName, value: item.eventType };
  });
  return groupBy(data, 'groupName');
};

export interface EventListProps {
  className: string;
  loading: boolean;
  category?: Category;
  editable?: boolean;
  noticeData?: any;
  eventData?: any;
  onEventRule?: (value: EventRuleItem) => void;
  onNoticeRule?: (value: NoticeRuleItem[]) => void;
  onUnavailable?: (value: boolean) => void;
}
const NoticeRulesList: React.FC<EventListProps> = props => {
  const {
    className,
    loading,
    eventData,
    noticeData,
    editable,
    onNoticeRule,
    category,
    onUnavailable,
    onEventRule,
  } = props;

  const dataGroupByGroupType = useMemo(() => {
    return formatEventRules(eventData || []);
  }, [eventData]);

  // groupTypes
  const groupTypes = useMemo(() => {
    return Object.keys(dataGroupByGroupType);
  }, [dataGroupByGroupType]);

  return (
    <div
      className={className}
      style={{
        width: '100%',
        minHeight: 'calc(100vh - 64px - 104px - 112px - 56px)',
        position: 'relative',
      }}
    >
      <Divider
        style={{
          minHeight: 'calc(100vh - 64px - 104px - 112px - 56px - 48px)',
          position: 'absolute',
          left: '49%',
          height: '100%',
        }}
        type="vertical"
        dashed
      />
      <Row>
        <Col span={12}>
          <Spin spinning={loading} style={{ minHeight: 360 }}>
            {groupTypes?.map(item => (
              <div className={styles.eventRulesWrapper} key={item}>
                <div className={styles.eventGroupName}>{item}</div>
                <div>
                  <Row gutter={[16, 16]}>
                    {dataGroupByGroupType[item] &&
                      dataGroupByGroupType[item]?.map(i => (
                        <Col key={i.eventType}>
                          <NoticeCard
                            disabled={!editable}
                            key={item}
                            data={i}
                            onChange={onEventRule}
                            handleUnavailable={onUnavailable}
                          />
                        </Col>
                      ))}
                  </Row>
                </div>
              </div>
            ))}
          </Spin>
        </Col>
        <Col span={12}>
          <div className={styles.rightWrapper}>
            <div className={styles.titleWrapper}>多级通知流程</div>
            <Spin spinning={loading}>
              <LevelNotification
                editable={editable}
                data={noticeData}
                onChange={onNoticeRule}
                category={category}
              />
            </Spin>
          </div>
        </Col>
      </Row>
    </div>
  );
};
export default NoticeRulesList;