import React, { CSSProperties } from 'react';
import DescriptionItem from '@/components/DescriptionItem';
import styles from './index.less';
import CountUp from 'react-countup';
export interface StatCardProps {
  value: number | string | undefined;
  label: string;
  unit: string;
  icon?: string;
  iconSize?: { width: number; height: number };
  valueStyle?: CSSProperties;
  unitStyle?: CSSProperties;
  labelStyle?: CSSProperties;
  className?: string;
  style?: CSSProperties;
  showTwoValues?: boolean;
  secondValue?: number | string;
  secondUnit?: string;
  secondValueStyle?: CSSProperties;
  secondUnitStyle?: CSSProperties;
  onClick?: () => void;
  reverse?: boolean;
  direction?: 'horizontal' | 'vertical';
  valueDecimals?: number;
  secondValueDecimals?: number;
}

const StatCard: React.FC<StatCardProps> = ({
  value,
  label,
  unit,
  icon,
  iconSize,
  valueStyle,
  unitStyle,
  labelStyle,
  className,
  style,
  showTwoValues = false,
  secondValue,
  secondUnit,
  secondValueStyle,
  secondUnitStyle,
  onClick,
  reverse = false,
  direction = 'vertical',
  valueDecimals = 0,
  secondValueDecimals = 0,
}) => {
  const commonStyle = () =>{
    if(direction === 'horizontal'){
      return {}
    }
    return {
      marginTop: '-12px', // 添加这行来缩短间距
    }
  };
  const defaultValueStyle = {
    background: 'linear-gradient(180.00deg, rgb(170, 255, 246),rgb(37, 187, 255))',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    fontFamily: 'DIN',
    fontSize: '28px',
    fontWeight: 700,
    // ...commonStyle(), // 这个无效
    ...valueStyle,
  };  

  const defaultUnitStyle = {
    color: '#BCCEE9',
    // fontFamily: '微软雅黑',
    fontSize: '16px',
    fontWeight: 400,
    lineHeight: '21px',
    // ...commonStyle(), // 这个无效
    ...unitStyle,
  };
  
  const horizontalUnitStyle = {
    ...defaultUnitStyle,
    // marginRight: '160px', // 添加这行来改变间距
    ...unitStyle,
    marginRight: 40, // 添加这行来改变间距
  };

  const defaultLabelStyle = {
    color: '#BCCEE9',
    fontSize: '16px',
    fontWeight: 400,
    lineHeight: '21px',
    marginRight: 18,
    ...labelStyle,
  };
  
  const verticalLabelStyle = {
    color: '#BCCEE9',
    fontSize: '16px',
    fontWeight: 400,
    marginTop: '-6px', // 添加这行来缩短间距
    // marginRight: '-300px',
    ...labelStyle,
  };

  const getLabelStyle = () => {
    if (direction === 'vertical') {
      return verticalLabelStyle;
    }
    return defaultLabelStyle;
  };

  const getUnitStyle = () => {
    if (direction === 'horizontal' && !showTwoValues) {
      return horizontalUnitStyle;
    }
    return defaultUnitStyle;
  };
  
  const renderSecondValueAndUnit = () => {
    if (!showTwoValues || !secondValue) return null;

    return (
      <div className={styles.secondValueContainer}>
        <span className={styles.secondValue} style={secondValueStyle}>
          <CountUp
            end={Number(secondValue)}
            // duration={2.7}
            separator=","
            decimals={secondValueDecimals}
          />
          {/* {secondValue} */}
        </span>
        <span className={styles.secondUnit} style={secondUnitStyle}>
          {secondUnit}
          {/* {secondUnit} */}
        </span>
      </div>
    );
  };

  return (
    <div 
      className={`${styles.statCard} ${className || ''}`}
      style={style}
      onClick={onClick}
    >
      <div className={styles.content} style={commonStyle()}>
        <DescriptionItem
          value={value}
          name={label}
          unit={unit}
          valueStyle={defaultValueStyle}
          unitStyle={getUnitStyle()}
          labelStyle={getLabelStyle()}
          direction={direction}
          reverseName={reverse}
          decimals={valueDecimals}
        />
        {renderSecondValueAndUnit()}
      </div>
      
      {icon && (
        <div 
          className={styles.iconContainer}
          style={{ 
            backgroundImage: `url(${icon})`,
            width: iconSize?.width || 48,
            height: iconSize?.height || 48,
          }}
        />
      )}
    </div>
  );
};

export default StatCard; 