import BigNumber from 'bignumber.js';
import { useMemo } from 'react';
import { Dots } from 'src/components';
import getPrefixNumber from 'src/utils/getPrefixNumber';
import styles from './Level.module.scss';

const POWER = 1000;

enum LevelValue {
  energy = 'energy',
  sigma = 'sigma',
  karma = 'karma',
}

export type Props = {
  energy: number;
  sigma: number;
  karma: string;
};

function Level({ value }: { value: Props }) {
  const level = useMemo(() => {
    if (!value) {
      return <Dots />;
    }

    return Object.keys(LevelValue).reduce((acc: number, item) => {
      const prefix = getPrefixNumber(POWER, new BigNumber(value[item] || 0).toNumber());

      return new BigNumber(acc).plus(prefix).toNumber();
    }, 0);
  }, [value]);

  return (
    <span className={styles.text}>
      level <span className={styles.value}>{level}</span>
    </span>
  );
}

export default Level;

Neighbours