import DescriptionItem from '@/components/DescriptionItem';
import type { StatisticProps } from 'antd';
import { Statistic } from 'antd';
import CountUp from 'react-countup';
import styles from './index.less';

interface CenterStatsProps {
  data: Array<{
    id: number;
    type: string;
    type_desc: string;
    num: number;
    unit: string;
  }>;
}

const formatter: StatisticProps['formatter'] = (value) => (
  <CountUp end={Number(value)} separator="" decimals={2} />
  //   <CountUp end={Number(value)} separator="," decimals={2} />
);

const CenterStats = ({ data }: CenterStatsProps) => {
  const totalData = data.find((item) => item.type_desc === '数据总量');
  const newData = data.find((item) => item.type_desc === '今日新增数量');

  const commonValueStyle = {
    fontFamily: 'D-DIN',
    fontSize: '36px',
    fontWeight: '700',
    color: 'linear-gradient(180deg, rgb(246, 246, 246),rgb(255, 255, 255))',
    lineHeight: '39px',
  };

  const commonLabelStyle = {
    color: 'rgb(255, 255, 255)',
    fontSize: '22px',
    fontWeight: '700',
  };

  const commonUnitStyle = {
    color: 'rgb(255, 255, 255)',
    fontSize: '18px',
    fontWeight: '700',
    marginTop: '6px',
    marginLeft: '-8px',
  };

  const commonStyle = {
    marginTop: '29px',
    marginLeft: '2px',
    alignItems: 'center',
  };

  const getValueStyle = (index: number) => {
    if (1 === index) {
      return {
        ...commonValueStyle,
        color: '#FFF0B3',
      };
    } else if (2 === index) {
      return {
        ...commonValueStyle,
        color: '#FFD9C9',
      };
    } else if (3 === index) {
      return {
        ...commonValueStyle,
        color: '#AAD3FF',
      };
    }
    return commonValueStyle;
  };

  return (
    <div className={styles.container}>
      <div className={styles.totalSection}>
        <div className={styles.totalRow}>
          <span className={styles.totalTitle}>数据总量</span>
          <Statistic value={totalData?.num || 0} formatter={formatter} />
          <span className={styles.unit}>{totalData?.unit}</span>
        </div>
        <div className={styles.newData}>
          <span className={styles.label}>今日新增</span>
          <Statistic value={newData?.num || 0} formatter={formatter} />
          <span className={styles.unit}>{newData?.unit}</span>
        </div>
      </div>

      <div className={styles.dataTypeSection}>
        <div className={styles.ellipseBg} />
        <div className={styles.circleContainer}>
          {data.slice(2, 6).map((item, index) => (
            <div key={item.id} className={styles.dataTypeItem}>
              <div
                className={`${styles.circle} ${styles[`circle${index + 1}`]}`}
              >
                <DescriptionItem
                  decimals={2}
                  value={item.num}
                  name={item.type_desc}
                  unit={item.unit}
                  valueStyle={getValueStyle(index)}
                  unitStyle={commonUnitStyle}
                  labelStyle={commonLabelStyle}
                  style={commonStyle}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default CenterStats;
