import PropTypes from '../_util/vue-types';
import { getComponentFromProp, initDefaultProps } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider';
import StatisticNumber from './Number';

export const StatisticProps = {
  prefixCls: PropTypes.string,
  decimalSeparator: PropTypes.string,
  groupSeparator: PropTypes.string,
  format: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  valueStyle: PropTypes.any,
  valueRender: PropTypes.any,
  formatter: PropTypes.any,
  precision: PropTypes.number,
  prefix: PropTypes.any,
  suffix: PropTypes.any,
  title: PropTypes.any,
};

export default {
  name: 'AStatistic',
  props: initDefaultProps(StatisticProps, {
    prefixCls: 'ant-statistic',
    decimalSeparator: '.',
    groupSeparator: ',',
  }),
  inject: {
    configProvider: { default: () => ({}) },
  },

  render() {
    const { prefixCls: customizePrefixCls, value = 0, valueStyle, valueRender } = this.$props;
    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
    const prefixCls = getPrefixCls('statistic', customizePrefixCls);

    const title = getComponentFromProp(this, 'title');
    let prefix = getComponentFromProp(this, 'prefix');
    let suffix = getComponentFromProp(this, 'suffix');
    const formatter = getComponentFromProp(this, 'formatter');
    let valueNode = (
      <StatisticNumber {...{ props: this.$props }} value={value} formatter={formatter} />
    );
    if (valueRender) {
      valueNode = valueRender(valueNode);
    }

    return (
      <div class={prefixCls}>
        {title && <div class={`${prefixCls}-title`}>{title}</div>}
        <div style={valueStyle} class={`${prefixCls}-content`}>
          {prefix && <span class={`${prefixCls}-content-prefix`}>{prefix}</span>}
          {valueNode}
          {suffix && <span class={`${prefixCls}-content-suffix`}>{suffix}</span>}
        </div>
      </div>
    );
  },
};