import { PointsStatistics } from '@/pages/Points/index';
import { getPointsStatisticsReq } from '@/services/points';
import { formatNumber } from '@/utils/format';
import { to } from '@/utils/promise';
import { useNavigate } from '@umijs/max';
import { Typography } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

function UserPoints() {
  const [statistics, setStatistics] = useState<PointsStatistics>();
  const navigate = useNavigate();

  useEffect(() => {
    // 获取积分统计
    const getPointsStatistics = async () => {
      const [res] = await to(getPointsStatisticsReq());
      if (res && res.data) {
        setStatistics(res.data);
      }
    };

    getPointsStatistics();
  }, []);

  const userCredit = formatNumber(statistics?.userCredit);

  return (
    <div className={styles['user-points']}>
      <div className={styles['user-points__label']}>当前可用算力积分</div>
      <Typography.Paragraph
        className={styles['user-points__value']}
        ellipsis={{ tooltip: userCredit }}
      >
        {userCredit}
      </Typography.Paragraph>
      <div
        className={styles['user-points__button']}
        onClick={() => {
          navigate('/points');
        }}
      >
        查看详情
      </div>
    </div>
  );
}

export default UserPoints;
