import type { FunctionalComponent, VNodeTypes } from 'vue';
import type { FormatConfig, valueType } from './utils';

interface NumberProps extends FormatConfig {
  value: valueType;
}

const StatisticNumber: FunctionalComponent<NumberProps> = props => {
  const { value, formatter, precision, decimalSeparator, groupSeparator = '', prefixCls } = props;
  let valueNode: VNodeTypes;

  if (typeof formatter === 'function') {
    // Customize formatter
    valueNode = formatter({ value });
  } else {
    // Internal formatter
    const val = String(value);
    const cells = val.match(/^(-?)(\d*)(\.(\d+))?$/);
    // Process if illegal number
    if (!cells) {
      valueNode = val;
    } else {
      const negative = cells[1];
      let int = cells[2] || '0';
      let decimal = cells[4] || '';

      int = int.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator);
      if (typeof precision === 'number') {
        decimal = decimal.padEnd(precision, '0').slice(0, precision > 0 ? precision : 0);
      }

      if (decimal) {
        decimal = `${decimalSeparator}${decimal}`;
      }

      valueNode = [
        <span key="int" class={`${prefixCls}-content-value-int`}>
          {negative}
          {int}
        </span>,
        decimal && (
          <span key="decimal" class={`${prefixCls}-content-value-decimal`}>
            {decimal}
          </span>
        ),
      ];
    }
  }

  return <span class={`${prefixCls}-content-value`}>{valueNode}</span>;
};
StatisticNumber.displayName = 'StatisticNumber';
export default StatisticNumber;