import React from 'react';
import { Avatar, Typography, makeStyles } from '@material-ui/core';
import clsx from 'clsx';
const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
        flexDirection: 'row',
    },
    regular: {},
    small: {},
    number: {
        '$regular &': {
            fontSize: '4rem',
        },
        '$small &': {
            fontSize: 30,
        },
    },
    unit: {
        marginTop: theme.spacing(5),
        width: 25,
        height: 25,
        '$small &': {
            marginTop: '16px',
            width: '16px',
            height: '16px',
            '& .MuiTypography-subtitle1': {
                fontSize: '0.7rem',
            },
        },
    },
    unitValue: {
        marginTop: -1.75,
    },
}), { name: 'FluentDisplayNumbers' });
const FluentDisplayNumbers = props => {
    const classes = useStyles();
    const { small, number: rawNumber } = props;
    // TODO: Revisit below after Tampa Demo
    let no = [rawNumber, null];
    if (rawNumber > 1_000_000) {
        //no = [Math.floor(rawNumber / 1_000_000), 'M'];
        let newNumber = rawNumber / 1_000_000;
        no = [Math.round(newNumber * 10) / 10, 'M'];
    }
    else if (rawNumber > 1_000) {
        //no = [Math.floor(rawNumber / 1_000), 'k'];
        let newNumber = rawNumber / 1_000;
        no = [Math.round(newNumber * 10) / 10, 'k'];
    }
    const [number, unit] = no;
    return (React.createElement("div", { className: clsx(classes.root, small ? classes.small : classes.regular) }, React.createElement(Typography, { className: classes.number }, number), unit && (React.createElement(Avatar, { className: classes.unit }, React.createElement(Typography, { variant: "subtitle1", className: classes.unitValue }, unit)))));
};
export default FluentDisplayNumbers;
//# sourceMappingURL=FluentDisplayNumbers.js.map