import React, { useState, useEffect, ReactNode } from 'react';
import {
  Grid,
  Card,
  Divider,
  Skeleton
} from '@arco-design/web-react';
import styles from './style/overview.module.less';
import IconCalendar from './assets/calendar.svg';
import IconComments from './assets/comments.svg';
import IconContent from './assets/content.svg';
import IconIncrease from './assets/increase.svg';
import { formatSeconds } from '@/utils/common';

const { Row, Col } = Grid;

type StatisticItemType = {
  icon?: ReactNode;
  title?: ReactNode;
  count?: ReactNode;
  loading?: boolean;
  unit?: ReactNode;
};

function StatisticItem(props: StatisticItemType) {
  const { icon, title, count, loading, unit } = props;
  return (
    <div className={styles.item}>
      <div className={styles.icon}>{icon}</div>
      <div>
        <Skeleton loading={loading} text={{ rows: 2, width: 60 }} animation>
          <div className={styles.title}>{title}</div>
          <div className={styles.count}>
            {count}
            <span className={styles.unit}>{unit}</span>
          </div>
        </Skeleton>
      </div>
    </div>
  );
}

type DataType = {
  avgTime?: number;
  runningNum?: number;
  successNum?: number;
  failureNum?: number;
};

const Overview = ({ overviewData }) => {
  const [data, setData] = useState<DataType>({});
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setData(overviewData);
  }, [overviewData]);

  return (
    <Card>
      <Row>
        <Col flex={1}>
          <StatisticItem
            icon={<IconIncrease />}
            title="实例平均处理时间"
            count={data.avgTime < 1000 ? data.avgTime : Math.floor(data.avgTime / 1000 / 60)}
            loading={loading}
            unit={data.avgTime >= 1000 ? '分' + formatSeconds(`${data.avgTime / 1000}`).split('分')[1] || formatSeconds(`${data.avgTime / 1000}`) : '毫秒'}
          />
        </Col>
        <Divider type="vertical" className={styles.divider} />
        <Col flex={1}>
          <StatisticItem
            icon={<IconCalendar />}
            title="运行中"
            count={data.runningNum}
            loading={loading}
            unit="个"
          />
        </Col>
        <Divider type="vertical" className={styles.divider} />
        <Col flex={1}>
          <StatisticItem
            icon={<IconContent />}
            title="成功数"
            count={data.successNum}
            loading={loading}
            unit="个"
          />
        </Col>
        <Divider type="vertical" className={styles.divider} />
        <Col flex={1}>
          <StatisticItem
            icon={<IconComments />}
            title="失败数"
            count={data.failureNum}
            loading={loading}
            unit="个"
          />
        </Col>
      </Row>
    </Card>
  );
};

export default Overview;
