import { Space } from 'antd';
import classNames from 'classnames';
import React, { CSSProperties, Fragment, memo } from 'react';
import CountUp from 'react-countup';
import styles from './index.less';

interface DescriptionItemProps {
  value?: any;
  name: string;
  unit?: string;
  valueStyle?: CSSProperties;
  unitStyle?: CSSProperties;
  labelStyle?: CSSProperties;
  style?: CSSProperties;
  direction?: 'vertical' | 'horizontal';
  decimals?: number;
  reverseName?: boolean;
  onClick?: () => void;
  showTextToValue?: boolean;
}

/** @name 描述列表项 */
const DescriptionItem: React.FC<DescriptionItemProps> = memo((props) => {
  const {
    value,
    name,
    unit,
    valueStyle = {},
    unitStyle = {},
    labelStyle = {},
    style = {},
    direction = 'vertical',
    decimals,
    reverseName = false,
    onClick,
    showTextToValue = false,
  } = props;

  const ValueAndUnit = (
    <Space align="center" size="small">
      {showTextToValue ? (
        <div className={styles.value} style={valueStyle}>
          {value}
        </div>
      ) : value !== undefined ? (
        <CountUp
          className={classNames(styles.value, {
            [styles.gradientValue]: !valueStyle?.color,
          })}
          end={Number(value)}
          style={valueStyle}
          preserveValue
          decimals={decimals}
        />
      ) : (
        <div
          className={classNames(styles.value, {
            [styles.gradientValue]: !valueStyle?.color,
          })}
        >
          --
        </div>
      )}

      {unit && (
        <div className={styles.unit} style={unitStyle}>
          {unit}
        </div>
      )}
    </Space>
  );

  const Label = (
    <div className={styles.label} style={labelStyle}>
      {name}
    </div>
  );

  return (
    <div
      className={classNames(
        { [styles.container]: onClick },
        direction === 'vertical' ? styles.verticalWrap : styles.horizontalWrap,
      )}
      onClick={onClick}
      style={{ ...style, cursor: onClick ? 'pointer' : 'default' }}
    >
      {reverseName ? (
        <Fragment>
          {Label}
          {ValueAndUnit}
        </Fragment>
      ) : (
        <Fragment>
          {ValueAndUnit}
          {Label}
        </Fragment>
      )}
    </div>
  );
});

export default DescriptionItem;
