import React from 'react';
import cn from 'classnames';
import styles from './TabCount.css';
import PropTypes from 'prop-types';

function getNumber(no) {
  let result = Number.parseInt(no);
  if (no >= 1000) {
    result = `${Math.round(result / 100) / 10}k`;
  }
  return result;
}

function getRootClassName({ className, active, sub }) {
  return cn('talk-tab-count', className, {
    [styles.root]: !sub,
    [styles.rootSub]: sub,
    [styles.rootActive]: active && !sub,
    [styles.rootSubActive]: active && sub,
    'talk-tab-active': active,
  });
}

/**
 * The `TabCount` renders a count number next to a tab name.
 */
const TabCount = ({ children, active, sub, className }) => (
  <span className={getRootClassName({ className, active, sub })}>
    {getNumber(children)}
  </span>
);

TabCount.propTypes = {
  // className to be added to the root element.
  className: PropTypes.string,

  // active indicates that the related tab is currently active.
  active: PropTypes.bool,

  // Sub indicates that this component belongs to a sub-tab-panel.
  sub: PropTypes.bool,
};

export default TabCount;