import React, { useContext } from 'react';
import {
  Statistic as OldStatistic,
  StatisticProps,
  ConfigProvider,
} from 'antd';

import classNames from 'classnames';
import './index.less';

interface StatisticExtraProps {
  titlePosition?: 'top' | 'bottom';
}

const Statistic = ({
  className,
  valueStyle,
  titlePosition = 'top',
  ...props
}: StatisticExtraProps & StatisticProps) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-statistic');

  const getValueStyle = () => {
    return {
      fontSize: '36px',
      fontFamily: 'MideaType',
      fontWeight: 'bold',
      color: 'var(--title-font)',
      lineHeight: '44px',
      ...valueStyle,
    };
  };

  return (
    <OldStatistic
      {...props}
      valueStyle={getValueStyle()}
      className={classNames(
        `${prefixCls}-box`,
        `${prefixCls}--title-${titlePosition}`,
        className,
      )}
    ></OldStatistic>
  );
};

const NewCountdown = ({
  className,
  valueStyle,
  titlePosition = 'top',
  ...props
}: StatisticExtraProps & StatisticProps) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-countdown');

  const { Countdown } = OldStatistic;

  const getValueStyle = () => {
    return {
      fontSize: '36px',
      fontFamily: 'MideaType',
      fontWeight: 'bold',
      color: 'var(--title-font)',
      lineHeight: '44px',
      ...valueStyle,
    };
  };

  return (
    <Countdown
      {...props}
      valueStyle={getValueStyle()}
      className={classNames(
        `${prefixCls}-box`,
        `${prefixCls}--title-${titlePosition}`,
        className,
      )}
    ></Countdown>
  );
};

Statistic.Countdown = NewCountdown;

export { Statistic };