import React from 'react';
import { Icon } from 'UI';
import cn from 'classnames';
import styles from './countBadge.module.css';

const getFixedValue = (val) => {
  let accuracy = 0;
  while (Math.trunc(val * 10 ** accuracy) === 0) {
    accuracy += 1;
  }
  const parsed = parseFloat(val).toFixed(accuracy).toString();
  return parsed;
};

function CountBadge({
  title,
  icon,
  count = '',
  unit = '',
  change,
  oppositeColors = false,
  component,
  className,
}) {
  const viewChange = typeof change === 'number' && change !== 0;
  const changeIncrease = change > 0;
  const colorGreen = oppositeColors ? !changeIncrease : changeIncrease;
  return (
    <div className={cn(className, 'flex items-baseline')}>
      <div className={cn(styles.countWrapper, 'flex items-baseline')}>
        {icon && (
          <Icon name={icon} size="18" marginRight="5" className={styles.icon} />
        )}
        <span className={styles.count}> {component || count} </span>
        <span className={styles.unit}>{unit}</span>
      </div>
      <div className={cn(styles.change, 'ml-2')} data-colorgreen={colorGreen}>
        {viewChange && (
          <div>
            <Icon
              size="10"
              name={changeIncrease ? 'arrow-up' : 'arrow-down'}
              color={colorGreen ? 'green' : 'red'}
              marginRight="5"
            />
            {`${getFixedValue(change)}%`}
          </div>
        )}
      </div>
    </div>
  );
}

CountBadge.displayName = 'CountBadge';

export default CountBadge;