import React from 'react';
import { Row, Col, Avatar, Tooltip, Typography } from 'antd';
import classNames from '@pansy/classnames';
import { get } from 'lodash';
import styles from './index.less';
import { formatNumber } from '../../utils';

const { Text } = Typography;

interface IApplicationDigest {
  digestData?: {
    type?: string;
    count?: number;
    name?: string;
  }[];
  applicationInfo?: any;
  openAlarm?: () => void;
}

const ApplicationDigest = (props: IApplicationDigest) => {
  const { digestData = [], applicationInfo = {}, openAlarm } = props;
  const span = Array.isArray(digestData) && digestData.length > 0 ? 12 : 24;
  // 判断展示数据个数
  let offset = 0;
  if (digestData.length <= 4 && digestData.length > 0) {
    offset = (4 - digestData.length) * 3;
  }

  return (
    <div className={styles.appHeader}>
      <div className={styles.headerContainer}>
        <Row>
          <Col span={span}>
            <div className={styles.leftContainer}>
              <Avatar
                src={get(applicationInfo, 'avatar')}
                size={56}
                shape="square"
              />
              <div className={styles.leftTextContainer}>
                <div className={styles.appName}>
                  {get(applicationInfo, 'appName')}
                </div>

                {Array.isArray(digestData) && digestData.length > 0 ? (
                  <Tooltip
                    placement="bottom"
                    title={get(applicationInfo, 'description')}
                  >
                    <Text
                      style={{
                        width: '416px',
                        color: 'rgba(0, 0, 0, 0.65)',
                        fontSize: '14px',
                      }}
                      ellipsis
                    >
                      {applicationInfo?.description}
                    </Text>
                  </Tooltip>
                ) : (
                  <Text
                    style={{
                      width: '100%',
                      color: 'rgba(0, 0, 0, 0.65)',
                      fontSize: '14px',
                    }}
                    ellipsis
                  >
                    {applicationInfo.description}
                  </Text>
                )}
              </div>
            </div>
          </Col>
          {digestData?.map((item, idx) => {
            return (
              <Col span={3} key={item?.name} offset={idx === 0 ? offset : 0}>
                <div
                  className={classNames(styles.container, {
                    [styles.danger]: item?.type === 'danger',
                  })}
                >
                  <div className={classNames(styles.count, styles.content)}>
                    <span onClick={() => openAlarm?.()}>
                      {formatNumber(item?.count || 0)}
                    </span>
                  </div>
                  <div className={classNames(styles.name, styles.content)}>
                    <span onClick={() => openAlarm?.()}>{item?.name}</span>
                  </div>
                </div>
              </Col>
            );
          })}
        </Row>
      </div>
    </div>
  );
};

export default ApplicationDigest;